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

嗯，你可以做同样的事情：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');
}

如何使用jQuery UI检测我拖到窗外？

1 个答案: