使用jQuery在表格行中拖放使用jQuery

Question

我想拖動我的表格行並使用同一個表格中的另一行進行交換。我想使用mouseup和mousedown事件來做到這一點。

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排。我將第一排換成第五排。這一次它會互換成功，但我想交換第一或第五排與另一個或其他不會，但如果我想交換第二與第三它將工作的第一次，但第二次它也將像以前一樣。

Answer 1

我已經改變了它

從

$("#multiTable tr").on("mouseup", function (e) { 

到

$(document).on("mouseup","#multiTable tr",function (e) 

，做工精細

工作實例

$(function() { 
 
    var html = "", 
 
     index = -1; 
 
    $(document).on("mouseup","#multiTable tr",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(); 
 
    }); 
 
    $(document).on("mousedown","#multiTable tr",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>