CODEWITHSUNDEEP
jqueryjquery-ui
sandeep
sandeep

Reputation: 449

select multiple rows in a table and drag & drop in same table

here am generating one table with checkboxes.

<table id="sortable">
    <tr class="myDragClass"><td><input type="checkbox" />row 1</td><td>text text text</td></tr>
    <tr class="myDragClass"><td><input type="checkbox" />row 2</td><td>text text text</td></tr>
    <tr class="myDragClass"><td><input type="checkbox" />row 3</td><td>text text text</td></tr>
    <tr class="myDragClass"><td><input type="checkbox" />row 4</td><td>text text text</td></tr>
    <tr class="myDragClass"><td><input type="checkbox" />row 5</td><td>text text text</td></tr>    
</table>

this is my java script code:

  $(function () {
    $('#sortable tr').draggable({
        helper: function () {
            var selected = $('#sortableinput:checked').parents('tr');
            if (selected.length === 0) {
                selected = $(this);
            }
            var container = $('<div/>').attr('id', 'sortable');
            container.append(selected.clone());
            return container;
        }
    });

    $('#sortable').droppable({

        tolerance: 'pointer',
        drop: function (event, ui) {
            debugger;
            // $(this).append(ui.helper.children());
            var _GetVal = ui.helper.children();
            alert(ui.helper.children());
        }
    });

});

here am done selecting and moving but whn am moving its adding moved records to last position. but i want to move perticular position `

Here am selecting multiple rows using checkboxes and i want to move multiple rows at a time. like (2&3) to last. so this is my rows order like 1,4,5,2,3.i want to move(means drag n drop) the rows in same table

Upvotes: 2

Views: 3019

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362390

Since you're using jQueryUI why don't you use 'sortable' for the table?

$("#sortable tbody").sortable({
}).disableSelection();

Here is a working example: http://bootply.com/60250

Upvotes: 1

Gnanz
Gnanz

Reputation: 1873

specify id to each row, and try something like, you may use loop structures to input 2&3

$("#sortable#" + id).appendTo("#sortable");

Upvotes: 0

Related Questions