Question

我正在尝试做一些非常简单的事情。我试图使一个表的TR可以与JQuery UI和Draggable分类到一个不同的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

您只需使用两个可排序即可。像：

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

可排序表和Draggable TR

1 个答案: