0
我想拖动我的表格行并使用同一个表格中的另一行进行交换。我想使用mouseup和mousedown事件来做到这一点。使用jQuery在表格行中拖放使用jQuery
CODE
$(function() {
var html = "",
index = -1;
$("#multiTable tr").on("mouseup", function (e) {
console.log("Mouse Up-> ")
var index1 = $(this).index();
var index2 = index;
if (index1 == index2) {
e.epreventDefault();
return;
}
var spaceIndex1 = index2 + 1;
var html1 = "<tr>" + $(this).html().trim() + "<tr>";
var html2 = "<tr>" + html + "</tr>";
console.log(html);
$('#multiTable > tbody > tr').eq(index1).replaceWith(html2);
$('#multiTable > tbody > tr').eq(index2).replaceWith(html1);
$('#multiTable > tbody > tr').eq(spaceIndex1).remove();
});
$("#multiTable tr").on("mousedown", function (e) {
console.log("Mouse Down->");
html = $(this).html().trim();
index = $(this).index();
//console.log($(this).index());
//console.log($(this).html().trim());
});
});table {
width: 100%;
border: 1px #000 solid;
user-select: none;
}
table::selection {
color: transparent;
outline-color: transparent;
}
table th {
text-align: center;
border: 1px #000 solid;
}
table td {
text-align: center;
border: 1px #000 solid;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="multiTable">
<tr>
<th>Game</th>
<th>Contest</th>
<th>Life</th>
<th>Fight</th>
</tr>
<tr>
<td>Mortal Combact</td>
<td>Imagine Cup</td>
<td>Bangladesh</td>
<td>Ban - Ind</td>
</tr>
<tr>
<td>Crysis 2</td>
<td>Voice Radio</td>
<td>Sri</td>
<td>Ind - Pak</td>
</tr>
<tr>
<td>House of dead</td>
<td>Code 2 Win</td>
<td>Bangladesh</td>
<td>Usa - Rus</td>
</tr>
<tr>
<td>Plant vs Zombie</td>
<td>EATL App Comitition</td>
<td>Bangladesh</td>
<td>Isr - Pal</td>
</tr>
<tr>
<td>Highway Rider</td>
<td>Code Gear</td>
<td>Bangladesh</td>
<td>Iraq - Iran</td>
</tr>
</table>我的代码工作正常第一次，也不会引发第二次。例如，我的桌子上有5排。我将第一排换成第五排。这一次它会互换成功，但我想交换第一或第五排与另一个或其他不会，但如果我想交换第二与第三它将工作的第一次，但第二次它也将像以前一样。