jquery在拖出时从droppable中删除答案

【问题标题】：jquery remove from droppable when dragged outjquery在拖出时从droppable中删除
【发布时间】：2013-04-30 17:31:37
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案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");
        }
    });


});

【讨论】：

这太好了.. 我猜 ui 参数毕竟不是空的。但有一件事，似乎只要鼠标退出可放置容器，out 方法就会触发。有没有简单的方法让它等到鼠标按钮被释放？
刚刚检查，新的解决方案不能正常工作，但应该给你的想法
这是一个完美的答案！
我注意到一件事，如果你删除<li class="placeholder">Add your items here</li>，你就不能再添加了。这是设计使然吗？

【解决方案2】：

您可以使用 CSS 来更改列表样式。像这样的东西应该可以工作：

.ui-droppable .ui-sortable ol { list-style: none outside none; }

或者更好

#cart ol { list-style: none outside none; }

希望这会有所帮助！

【讨论】：

我不只是想隐藏子弹。我实际上想在拖出时从可放置容器中删除元素。
可能在$("<li></li>").text(ui.draggable.text()).appendTo(this); 之后添加ui.draggable.remove(); 参见演示：jsFiddle

【解决方案3】：

A.Wolff 的解决方案让我走上了正轨，但是通过这篇文章中 Drew 的解决方案使用了 sortable.out 函数： How to remove an item that is pulled away from it's list? 是更好的解决方案

$(function () {
    var removeIntent = false;
    
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#cart ol").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
        }
    }).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");
        },
        over: function () {
            removeIntent = false;
        },
        out: function () {
            removeIntent = true;
        },
        beforeStop: function (event, ui) {
            if(removeIntent == true){
                ui.item.remove();   
            }
        }
    });


});

【讨论】：