只有当鼠标移动比垂直移动更加水平时才允许jQuery UI拖动

Question

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

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

当鼠标向左或向右移动时，如何才能将元素仅拖动？

如果x坐标（鼠标向下到当前）之间的差异大于或等于x坐标的差异，甚至更好。

我尝试在拖动开始时记录event.pageX和event.pageY值，然后通过在拖动开始时执行绝对值来比较它们，所以startPageX - 当前event.pageX> = startPageY - 当前event.pageY但是没有似乎工作。

编辑： distance: 50属性设置50px的延迟。 有没有办法设置x轴的延迟分开y轴的延迟？

Answer 1

像这样使用axis选项：

$( ".selector" ).draggable({ axis: "x" });

aixs选项约束拖动到水平（x）或垂直（y）轴。 可能的值：“x”，“y”。

记录在这里： http ： //api.jqueryui.com/draggable/#option-axis

Answer 2

您可以组合轴和距离，但是您必须覆盖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});