jquery 拖出时从 droppable 中移除

Question

我已经根据示例shopping cart demo实现了jQuery的可拖放功能。 。我希望能够删除 <li>当您将其拖出 droppable 时，从 droppable 中删除。我认为这可能与 droppable out event 有关。但 ui 参数为空。有谁知道解决办法吗？

Answer 1

这是一个完整的工作解决方案，尚未完全测试，您可能仍然应该调试它: {将可拖动元素重新分配给已放置的元素以触发退出事件} {您也应该重新分配 droppable!}

SEE DEMO

EDITABLE DEMO

$(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#cart ol").droppable({
        out: function (event, ui) {
            var self = ui;
            ui.helper.off('mouseup').on('mouseup', function () {
                $(this).remove();
                self.draggable.remove();
            });
        },
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            if (ui.draggable.is('.dropped')) return false;
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
                appendTo: "body",
                helper: "clone"
            }).addClass('dropped');
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function () {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $(this).removeClass("ui-state-default");
        }
    });


});