CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Amirul I
Amirul I

Reputation: 301

Sortable table and Draggable TR

I am trying to do something very simple. I am trying to make the TRs of a table sortable with JQuery UI and also Draggable to a different div which I will use as a trash can. I have the following script. But for some reason Drag and Sort are conflicting

$("#TBL_OUTPUT").sortable({
    items: 'tr:not(:first)'
});

$("#TBL_OUTPUT tr").draggable({
    helper: "clone",
    start: function(event, ui) {
        c.tr = this;
        c.helper = ui.helper;
    }
});

$("#TRASHCAN").droppable({
    hoverClass: "TRASH_Hover",
    drop: function(event, ui) {
        $(c.tr).remove();
        $(c.helper).remove();
    }
});

Any thoughts?

Upvotes: 1

Views: 1918

Answers (1)

boszlo
boszlo

Reputation: 1286

You can simply use two sortables. Like:

$("table").sortable({
    items: 'tr:not(:first)',
    connectWith: 'div.bin',
    helper: 'clone',
    start: function (e, ui) {
        $('.bin').css("background-color", "red");
    },
    stop: function (e, ui) {
        $('.bin').css("background-color", "green");
    }
});

$('div.bin').sortable({
    connectWith: 'table',
    update: function (e, ui) {
        var content = ui.item.children('td').text();

        if (confirm('Delete item: ' + content + '?')) {
            $('div.bin').empty();
            alert('Item ' + content + ' deleted!');
        } else {
            alert(content + 'will stay in the bin and you can drag it back to table');
        }
    }
});

FIDDLE: https://jsfiddle.net/rte2by43/4/

If you want to keep droppable, this will also work:

$("#TBL_OUTPUT").sortable({
    items: 'tr:not(:first)',
    connectWith: '#TRASHCAN'
});

$("#TRASHCAN").droppable({
    hoverClass: "TRASH_Hover",
    drop: function(event, ui) {
        alert($(ui.draggable).children('td').text());
    }
});

Upvotes: 1

Related Questions