السلام عليكم ورحمة الله وبركاته
تمكنتُ أخيراً ولله الحمد من إنشاء برنامج جافاسكربت يتحكم بعناصر جدول، وقد وضعت سؤال قبل مدة في بداية العمل على هذا البرنامج: /index.php?showtopic=246361
الآن أريد أن أقوم بعمل نفس هذا البرنامج ولكن باستخدام الـ drag & drop، حيث قمت بعمله باستخدام الـ buttons لتحريك عناصر الجدول
هنا الكود:
<html>
<head>
<script type="text/javascript">
var filler = document.createElement('td');
filler.className = 'filler';
filler.innerHTML = '*';
filler.setAttribute("align", "center");
function moveUp()
{
var cell = this.parentNode.parentNode;
var row = cell.parentNode;
var row_above;
if(row.rowIndex === 1)
{
row_above = document.getElementById('mytable').insertRow(1);
row_above.insertCell(0);
}
else row_above = document.getElementById('mytable').rows[row.rowIndex - 1];
if(row_above.cells[1] && row_above.cells[1].className === 'filler') row_above.removeChild(row_above.cells[1]);
row_above.appendChild(cell);
if(row.cells.length === 1 )
{
if(row.rowIndex < document.getElementById('mytable').rows.length - 1) row.appendChild(filler.cloneNode(true));
else
{
document.getElementById('mytable').deleteRow(document.getElementById('mytable').rows.length - 1);
}
}
var tempArr = getIndicesArray();
update_row_numbers();
update_results(getReverseNumber(tempArr, form1.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form2.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form3.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form4.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form5.parentNode.parentNode.cells[0].innerText));
}
function moveDown()
{
var cell = this.parentNode.parentNode;
var row = cell.parentNode;
var row_below;
if(row.rowIndex === document.getElementById('mytable').rows.length - 1)
{
row_below = document.getElementById('mytable').insertRow(document.getElementById('mytable').rows.length);
row_below.insertCell(0);
}
else row_below = document.getElementById('mytable').rows[row.rowIndex + 1];
if(row_below.cells[1] && row_below.cells[1].className === 'filler') row_below.removeChild(row_below.cells[1]);
row_below.appendChild(cell);
if(row.cells.length === 1)
{
if(row.rowIndex > 1) row.appendChild(filler.cloneNode(true));
else
{
document.getElementById('mytable').deleteRow(1);
}
}
var tempArr = getIndicesArray();
//alert(tempArr.join());
//alert(form1.parentNode.parentNode.cells[0].innerText);
update_row_numbers();
update_results(getReverseNumber(tempArr, form1.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form2.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form3.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form4.parentNode.parentNode.cells[0].innerText), getReverseNumber(tempArr, form5.parentNode.parentNode.cells[0].innerText));
}
function update_row_numbers()
{
var counter = 1;
for(var i = 1; counter < document.getElementById('mytable').rows.length; i++)
{
document.getElementById('mytable').rows[counter].cells[0].innerHTML = i;
document.getElementById('mytable').rows[counter].cells[0].setAttribute("align", "center");
i += document.getElementById('mytable').rows[counter].cells.length - 2;
counter++;
}
}
function getIndicesArray()
{
var arr = new Array();
var counter = 1;
var RowIndex = 1;
var ArrayIndex = 0;
while(RowIndex <= document.getElementById('mytable').rows.length - 1)
{
var temp = counter;
for(var j = 0; j <= document.getElementById('mytable').rows[RowIndex].cells.length - 2; j++)
{
arr[ArrayIndex++] = counter;
temp++;
}
counter = temp;
RowIndex++;
}
return arr;
}
function getReverseNumber(arr, num)
{
for(var i = 1; i <= arr.length; i++)
{
if(arr[arr.length - i] == num) return i;
}
return -1; // not found
}
function update_results(r1, r2, r3, r4, r5)
{
//alert(r1 + " - " + r2 + " - " + r3 + " - " + r4 + " - " + r5);
var arr = [r1, r2, r3, r4, r5];
var arrayLength = arr.length;
var out = [];
var obj = [];
for(var i = 0; i < arrayLength; i++) obj[arr] = 0;
for(i in obj) out.push(i);
var f = out.length;
var rmin = 1;
var rmax = parseInt(document.getElementById('mytable').rows[document.getElementById('mytable').rows.length - 1].cells[0].innerText) + (document.getElementById('mytable').rows[document.getElementById('mytable').rows.length - 1].cells.length == 5 ? document.getElementById('mytable').rows[document.getElementById('mytable').rows.length - 1].cells.length - 3 : document.getElementById('mytable').rows[document.getElementById('mytable').rows.length - 1].cells.length - 2);
//alert(rmax);
var Or1 = rmin + ((f-1)*((r1-rmin)/(rmax-rmin)));
var Or2 = rmin + ((f-1)*((r2-rmin)/(rmax-rmin)));
var Or3 = rmin + ((f-1)*((r3-rmin)/(rmax-rmin)));
var Or4 = rmin + ((f-1)*((r4-rmin)/(rmax-rmin)));
var Or5 = rmin + ((f-1)*((r5-rmin)/(rmax-rmin)));
var Or_total = Or1 + Or2 + Or3 + Or4 + Or5;
//alert(Or1);
document.getElementById('resultTable').rows[0].cells[1].innerHTML = ((Or1/Or_total)*100).toFixed(2) + "%";
document.getElementById('resultTable').rows[1].cells[1].innerHTML = ((Or2/Or_total)*100).toFixed(2) + "%";
document.getElementById('resultTable').rows[2].cells[1].innerHTML = ((Or3/Or_total)*100).toFixed(2) + "%";
document.getElementById('resultTable').rows[3].cells[1].innerHTML = ((Or4/Or_total)*100).toFixed(2) + "%";
document.getElementById('resultTable').rows[4].cells[1].innerHTML = ((Or5/Or_total)*100).toFixed(2) + "%";
}
function buttons_Mode()
{
form1.Up1.style.display = 'inline';
form2.Up2.style.display = 'inline';
form3.Up3.style.display = 'inline';
form4.Up4.style.display = 'inline';
form5.Up5.style.display = 'inline';
form1.Down1.style.display = 'inline';
form2.Down2.style.display = 'inline';
form3.Down3.style.display = 'inline';
form4.Down4.style.display = 'inline';
form5.Down5.style.display = 'inline';
form1.style.position = 'static';
form2.style.position = 'static';
form3.style.position = 'static';
form4.style.position = 'static';
form5.style.position = 'static';
}
function drag_and_drop_Mode()
{
form1.Up1.style.display = 'none';
form2.Up2.style.display = 'none';
form3.Up3.style.display = 'none';
form4.Up4.style.display = 'none';
form5.Up5.style.display = 'none';
form1.Down1.style.display = 'none';
form2.Down2.style.display = 'none';
form3.Down3.style.display = 'none';
form4.Down4.style.display = 'none';
form5.Down5.style.display = 'none';
form1.style.position = 'relative';
form2.style.position = 'relative';
form3.style.position = 'relative';
form4.style.position = 'relative';
form5.style.position = 'relative';
}
N = (document.all) ? 0 : 1;
var ob;function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</head>
<body>
Select the interface you would like to use:
<input type="radio" name="group1" onclick="buttons_Mode();" checked> Using Buttons
<input type="radio" name="group1" onclick="drag_and_drop_Mode();"> Drag & Drop<p> </p>
<table id="mytable" border="1">
<thead>
<tr>
<th>Rank
</th>
<th colspan="5">
<p align="center">The Criteria
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p align="center">1
</td>
<td>
<form name="form1" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up1" value="Up" onclick="moveUp.call(this);">
<a style="width:50px; height:30px;"> Skill </a>
<input type="button" name="Down1" value="Down" onclick="moveDown.call(this);">
</form>
</td>
<td>
<form name="form2" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up2" value="Up" onclick="moveUp.call(this);">
<a style="width:50px; height:30px;"> Speed </a>
<input type="button" name="Down2" value="Down" onclick="moveDown.call(this);">
</form>
</td>
<td>
<form name="form3" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up3" value="Up" onclick="moveUp.call(this);">
<a style="width:50px; height:30px;"> Age </a>
<input type="button" name="Down3" value="Down" onclick="moveDown.call(this);">
</form>
</td>
<td>
<form name="form4" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up4" value="Up" onclick="moveUp.call(this);">
<a style="width:50px; height:30px;"> Strength </a>
<input type="button" name="Down4" value="Down" onclick="moveDown.call(this);">
</form>
</td>
<td>
<form name="form5" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up5" value="Up" onclick="moveUp.call(this);">
<a style="width:50px; height:30px;"> Height </a>
<input type="button" name="Down5" value="Down" onclick="moveDown.call(this);">
</form>
</td>
</tr>
</tbody>
</table>
<p>
<b>Relative Weight Pr (%):</b>
</p>
<table id="resultTable">
<tr>
<td>
<p align="right"><b>Skill</b>:
</td>
<td>
<p align="center">20.00%
</td>
</tr>
<tr>
<td>
<p align="right"><b>Speed</b>:
</td>
<td>
<p align="center">20.00%
</td>
</tr>
<tr>
<td>
<p align="right"><b>Age</b>:
</td>
<td>
<p align="center">20.00%
</td>
</tr>
<tr>
<td>
<p align="right"><b>Strength</b>:
</td>
<td>
<p align="center">20.00%
</td>
</tr>
<tr>
<td>
<p align="right"><b>Height</b>:
</td>
<td>
<p align="center">20.00%
</td>
</tr>
</table>
</body>
</html>حاولت بشتى الطرق، وشاهدت عدت دروس عبر الإنترنت لكن لم أوفق في عمل هذا البرنامج باستخدام الـ drag & drop
هل يمكنكم مساعدتي؟ وجزيتم خيراً
