javascript - 仅当鼠标水平移动多于垂直移动时才允许 jQuery UI 拖动

Question

我将此 jQuery UI 可拖动元素的轴设置为 x。

但是当鼠标在元素上上下移动时，它会拖动，因为鼠标移动并不完全笔直，并且 x 坐标之间存在差异。换句话说，当鼠标完成时，向上/向下鼠标移动是稍微对 Angular 的。

如何让元素仅在鼠标明显向左或向​​右移动时才拖动？

如果 x 坐标之间的差值(鼠标向下到当前位置)大于或等于 x 坐标的差值，那就更好了。

我尝试在拖动开始时记录 event.pageX 和 event.pageY 值，然后通过在拖动开始时执行绝对值来比较它们，所以startPageX - current event.pageX >= startPageY - current event.pageY 但这似乎不起作用。

编辑:distance: 50 属性设置 50px 的延迟。有没有办法单独设置 x 轴的延迟和 y 轴的延迟？

Answer 1

您可以组合轴和距离，但您必须重写 jQuery 检查距离的方式以将其约束到您的轴。这是 jsFiddle ，以及jQuery 1.10的相关代码

$.ui.draggable.prototype._mouseDistanceMet = function(event) {
  if (this.options.axis == 'x') {
    return Math.abs(this._mouseDownEvent.pageX - event.pageX) >= this.options.distance;
  } else if (this.options.axis == 'y') {
    return Math.abs(this._mouseDownEvent.pageY - event.pageY) >= this.options.distance;
  } else {
    return (Math.max(
        Math.abs(this._mouseDownEvent.pageX - event.pageX),
        Math.abs(this._mouseDownEvent.pageY - event.pageY)
      ) >= this.options.distance
    );
  }
}
$( "#draggable" ).draggable({axis: 'x', distance: 50});