Multiple Drag & Drop Example

by Suraj Raj Shrestha

HTML

<div id="container"></div>
<input id="chkMultiDragDrop" type="checkbox" name="chkMultiDragDrop" value="chkMultiDragDrop">Select for multiple drag and drop
<br />
<table class="tblDragDrop">
    <thead>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="draggable">
            <td>Data 11</td>
            <td>Data 12</td>
            <td>Data 13</td>
            <td>Data 14</td>
            <td>Data 15</td>
        </tr>
        <tr class="draggable">
            <td>Data 21</td>
            <td>Data 22</td>
            <td>Data 23</td>
            <td>Data 24</td>
            <td>Data 25</td>
        </tr>
        <tr class="draggable">
            <td>Data 31</td>
            <td>Data 32</td>
            <td>Data 33</td>
            <td>Data 34</td>
            <td>Data 35</td>
        </tr>
        <tr class="draggable">
            <td>Data 41</td>
            <td>Data 42</td>
            <td>Data 43</td>
            <td>Data 44</td>
            <td>Data 45</td>
        </tr>
        <tr class="draggable">
            <td>Data 51</td>
            <td>Data 52</td>
            <td>Data 53</td>
            <td>Data 54</td>
            <td>Data 55</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">Example of drag and drop</td>
        </tr>
    </tfoot>
</table>

CSS

.draggable {
    background-color: red;
}
#chkMultiDragDrop {
    background-color:blue;
}
#container {
    border: 1px solid black;
    height: 200px;
    background-color: yellow;
}
.selected {
    background-color: Azure;
}

JavaScript

var indices = "";
$('table tbody').on('click', 'tr', function (e) {
    $('#container').html('');
    if ($('#chkMultiDragDrop').is(':checked')) {
        $(this).toggleClass('selected');
        $('#container').html('checked');
    } else {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('#container').html('not checked');
    }
    e.stopPropagation();
}).sortable();

$('#chkMultiDragDrop').on('click', function (e) {
    if ($(this).is(":checked")) {

    } else {
        $('.selected').each(function () {
            $(this).removeClass('selected');
        });
    }
    e.stopPropagation();
});

$(document).on('click', 'body', function () {
    $('.selected').each(function () {
        $(this).removeClass('selected');
    });
});