如何使用拖到窗口外的 jQuery UI 进行检测？

Question

这是我当前的代码：

@row.draggable(
  handle: '.Drag',
  helper: (event) =>
    clone = @row.clone()
    $("td:gt(0)", clone).remove()
    return clone
  refreshPositions: true
  stop: (event) =>
    if event.pageX < 0
       #do something bc outside of window
       alert('dragged out of window');
)

问题是 if 语句（在stop 回调中）只有在我将项目拖到窗口左侧时才为真。

但是假设我将它拖到右侧、顶部或底部？

是否有涵盖所有情况的解决方案？

---

如果您看不懂coffeescript，这就是我的代码在javascript中（或多或少）翻译成的内容：

var _this = this;

this.row.draggable({
  handle: '.Drag',
  helper: function(event) {
    var clone;
    clone = _this.row.clone();
    $("td:gt(0)", clone).remove();
    return clone;
  },
  refreshPositions: true,
  stop: function(event) {
    if (event.pageX < 0) {
      return alert('dragged out of window');
    }
  }
});

Answer 1

好吧，你可以对 top 进行类似的操作：if event.pageY < 0。

对于底部和右侧，您需要对照相关事物的尺寸检查 pageX 和 pageY。由于pageX和pageY报告了鼠标相对于文档左上角的位置，而获取文档宽度的方法是通过document.body.clientWidth，所以可以这样组合：

if (event.pageX < 0 || event.pageX > document.body.clientWidth ||
    event.pageY < 0 || event.pageY > document.body.clientHeight) {
    alert('dragged out of window');
}