jQuery可拖拽：在div外面放置？

Question

有没有办法让 jQuery 在拖动项拖出可放置 DIV 时执行一个函数？

假设我们在一个 DIV 内有可拖拽或可排序的项，如果它们被放置在父 DIV 外面，则希望将它们删除。

我知道有 "out" 事件，但它仅在您拖动项目移出 DIV 时起作用，并不是在您释放鼠标按钮时。

- kasakka

Answer 1

最终我找到了一个合适的解决方案，尽管它有点“hacky”。我的做法是将拖动元素的前景 div 设置为可放置区域，但使用 dropover 和 dropout 功能来确定该项是否在前景 div 外。当它在 div 外部时，我绑定 mouseup 事件以执行放置功能。当它回到 div 内部时，我取消绑定 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");
        }
    });

- kasakka

---

我曾经遇到过这个问题，而这是我所找到的最佳解决方案。谢谢！ - froadie

Answer 2

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

如果用户将其拖出浏览器窗口会怎样？您也会考虑这种情况吗？

- jerjer

---

我已经尝试将其包装在另一个可放置的容器中，但无论如何似乎都无法正常工作。即使我在可拖动项所在的“前景”div内部放置，也会触发“背景”可放置事件。请参见http://stackoverflow.com/questions/1491742/jquery-ui-droppable-background基本上，我仍在解决同样的问题，只是回来尝试修复它。 - kasakka

如果包裹（wrapping）对你不起作用，请尝试堆叠（stacking），但是你必须将前景设置为背景的同级元素，然后只需设置适当的 z-index。否则在 drop 回调函数中检查 event.target。.. drop: function(e) { if (e.targe.id == bg_id) { ... } else {...} } - jerjer

尝试过了，没有成功。 似乎drop函数无法识别除droppable本身之外的任何其他事件目标ID。 至少当我尝试在控制台中记录ID时，只有droppable div记录，其他所有内容都不输出。 同样使用else来解决这个问题也不起作用 - 要么在droppable div上放下时执行某些操作，要么什么也不做。 不幸的是，如果背景div填满整个窗口，则忽略div顶部的内容是行不通的。 - kasakka

Answer 3

我用了一种相当“hacky”的方法解决了这个问题：我创建了一个带有内容div的表格，并使表格中的所有其他单元格都可以拖放。基本上，这意味着您可以在中心div之外轻松拖放，但这仍然远非最佳方法。

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

- kasakka