Drag and drop in table rows using jQuery

Question

I want to drag my table rows and swap with another row within the same table. I want to do it using mouseup and mousedown event.

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>

My code working fine with first time, it won't trigger 2nd time. For example I have 5 row in my table. I swap 1st row with 5th row. This time it will swap successfully with each other but I want to swap 1st or 5th row with another or each other it won't work but if I want to swap 2nd with 3rd it will work for first time but for second time it will also behave like previous one.

Anik Islam Abhi · Accepted Answer · 2015-09-16 02:32:20Z

I have changed it

from

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

to

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

and work fine

Working example

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

Collectives™ on Stack Overflow

Drag and drop in table rows using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related