Перетаскивание строк в таблице с помощью jQuery

Question

Я хочу перетащить строки таблицы и поменять другую строку в одной таблице. Я хочу сделать это с помощью mouseup и mousedown.

КОД

$(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>

Мой код работает отлично с первый раз, это не сработает 2-й раз. Например, у меня 5 строк в моей таблице. Я меняю первый ряд на 5-й ряд. На этот раз он поменялся бы друг на друга, но я хочу обменять 1-ю или 5-ю строку другим или друг с другом, но это не сработает, но если я хочу поменять 2-й на 3-й, он будет работать в первый раз, но во второй раз он также будет вести себя как предыдущий.

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>