jQuery Droppable：放置在 div 之外？

Question

当您将项目拖到可放置 DIV 之外时，有什么方法可以让 jQuery 执行某个功能吗？

假设我们在 div 中有可拖动或可排序的项目，并且您希望在将它们拖放到其父 div 之外时将其删除。

我知道有“out”事件，但是当您将项目拖到 div 之外时，该事件就会起作用，而不是在您放下它时（释放鼠标按钮）。

Answer 1

终于找到了一个正确的解决方案，尽管它也有点“hacky”。我所做的是将可拖动的前景 div 设置为可放置的，但使用 dropover 和 dropout 功能来确定该项目是否位于前景 div 之外。当它位于 div 外部时，我绑定 mouseup 事件来执行放置功能。当它回来时，我取消绑定 mouseup 事件，这样它就不会触发。

因为拖动时我已经按住了鼠标按钮，释放它就相当于放下我“手中”的东西。

$("#foregroundDiv").droppable({
        accept: ".draggableThingy",
        tolerance: "pointer",       
        out: function(event, ui) {
            $(ui.helper).mouseup(function() {
                doSomethingTo(ui.draggable);
            });
        },
        over: function(event, ui) {
            $(ui.helper).unbind("mouseup");
        }
    });

Answer 2

为什么不使用另一个可放置的 div 包装所有元素，然后在那里进行检查？

如果用户将其放到浏览器窗口之外怎么办？你也会考虑这个吗？

Answer 3

以一种相当“hacky”的方式解决了这个问题：制作一个表格，其中一个内容 div 位于中心，并使表格的所有其他单元格可放置。本质上，这意味着您可以毫无问题地将其放在中心 div 之外，但这仍然远不是一个好方法。

如果有人有更好的方法，请告诉我。