如何使用jQuery UI检测我拖到窗口外的内容

How do I detect with jQuery UI that I dragged outside the window?

本文关键字：窗口 jQuery 何使用 UI 检测      更新时间：2024-03-22

这是我当前的代码：

@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回调中）才为true。

但让我们说我把它拖到右边、上面还是下面？

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

如果你不能阅读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');
    }
  }
});

好吧，您可以对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');
}
相关文章：