如何检查元素是否被拖到 JQuery UI Sortable 之外？

Question

我正在制作一个 jQuery UI sortable，我需要检测一个元素何时被拖出。听起来完全像 out event 的工作 - 除了我自己最初错过的一个小评论：

注意：当可排序的项目被删除时也会触发此事件。

这对我来说是一个重要的展示。每当项目只是重新排列时，被拖动的项目仍然最后会得到一个out 事件。我一直在绞尽脑汁，但到目前为止还没有。 我如何检测 out 事件是因为该项目真的被拖到外面，还是仅仅是因为拖动操作正在停止？

_{（如果重要，jQuery UI 版本 1.11.4）}

添加：

好吧，我想我自己成了“只剩下最后一个荒谬的部分”陷阱的受害者。我试图做的是有两个可以在它们之间拖动项目的可排序对象。与the example 类似，但当项目被拖到所有可排序对象之外时，占位符会完全消失。这就是为什么我想跟踪哪些物品在里面，哪些物品在外面。

我最终解决它的方法是放弃这个“要求”。无论如何，如果占位符保留会更好，因为它会显示释放鼠标时项目将被放置到的位置 - 即使它在外面。

但是，如果我确实想保持这条路，我现在看到正确的解决方案是在 out 事件上隐藏占位符，并在 over 事件上显示它。即使开始拖动，也有over，尽管没有从外部拖动任何项目。

不管怎样，虽然这两种方法都可以解决我的真正的问题，但它们都没有真正回答我提出的问题，所以我会让它留下来。

Answer 1

我认为这是正确的答案：

var interval;
var outside = false
$(button).addEventListener('mousedown',function(e) {
    interval = setInterval(function() {
        if (outside) {
            //fire event
        }
    },1000); // 1000 ms between each frame
});
// This code will stop the interval if you move your mouse away from the field while still holding it.
$(button).addEventListener('mouseout',function(e) {
    outside = true;
    clearInterval(); //function to clear interval
});

Answer 2

不确定我是否在这里达到目标，还有其他一些陷阱。

示例：https://jsfiddle.net/Twisty/83Lwxkrs/

JavaScript

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "sortable-placeholder",
    out: function(e, ui) {
      $(".sortable-placeholder").remove();
    }
  }).disableSelection();
});

out 可用于删除占位符。因此，当拖动的项目离开时，噗，占位符消失了。当它被拖过另一个或相同的，噗，占位符被重新创建。

陷阱：将项目丢弃在任何可排序之外，该项目将一无所有。占位符被删除，被拖动的项目也是如此。我怀疑这可以通过查找 drop 或 mouse up 并在 sortable 尝试恢复位置之前重新创建占位符来解决。