使用jQuery拖放表行

Question

我想拖动我的表行并与同一个表中的另一行交换。我想用mouseup和mousedown事件来做。

CODE

＆＃13;

＆＃13;

$(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());
    });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的代码第一次正常工作，第二次不会触发。例如，我的表中有5行。我将第一排换成第五排。这次它会互相成功交换，但是我想换掉第一排或第五排，但是如果我想换第二次换第三次它会第一次工作但是第二次也会像前一个一样。

Answer 1

我已经改变了

来自

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

到

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

并且工作正常

工作示例

＆＃13;

＆＃13;

$(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());
    });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;