jQuery Droppable：放在 div 之外？

Posted 2023-05-08

【中文标题】jQuery Droppable：放在 div 之外？

【英文标题】：jQuery Droppable: dropping outside div?

【发布时间】：2010-12-21 22:56:59

【问题描述】：

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

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

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

【参考方案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");
        
    );

【讨论】：

我确实遇到了这个问题，这是我找到的最佳解决方案。谢谢！

【参考方案2】：

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

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

【讨论】：

我已经尝试将它包装在另一个 droppable 中，但无论如何这似乎都无法正常工作。即使我放在可拖动项目所在的“前景”div 内，“背景”可放置事件也会触发。请参阅***.com/questions/1491742/… 基本上我仍在与同样的问题作斗争，只是回到尝试修复它。

如果包装对您不起作用，请尝试堆叠，但您必须将前景设置为背景的同级，然后只需设置适当的 z-index，否则，请检查 event.target删除回调 .. drop: function(e) if (e.targe.id == bg_id) ... else ...

试过了，没有运气。除了可放置对象本身之外，drop 函数似乎无法识别任何其他事件目标 ID。至少当我尝试登录控制台时，只有可放置的 div 记录，其他一切都没有输出。同样，使用 else 来解决这个问题是行不通的——它要么在放置在可放置的 div 上时做某事，要么什么都不做。不幸的是，如果背景 div 填满整个窗口，这不起作用，它会忽略 div 顶部的内容

【参考方案3】：

以一种非常“hacky”的方式解决了这个问题：制作了一个表格，中间有一个内容 div，并使表格的所有其他单元格都可以放置。从本质上讲，这意味着您可以毫无问题地离开中心 div，但这仍然不是一个好方法。

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