可排序表格和可拖动TR

Question

我正在尝试做一些非常简单的事情。 我正在尝试使用JQuery UI将表的TR排序，也可以将其拖放到另一个div（将用作垃圾箱）。 我有以下脚本。 但是由于某些原因，“拖动”和“排序”存在冲突

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

有什么想法吗？

Answer 1

您可以简单地使用两个sortable 。 喜欢：

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

内容： https ://jsfiddle.net/rte2by43/4/

如果您想保留droppable ，这也将起作用：

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

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