javascript - 可排序表和可拖动 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');
        }
    }
});

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

如果您想保持可删除，这也可以:

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

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