Question

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

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

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

如果x坐标（鼠标下移到当前）之间的差异大于或等于x坐标的差异，那就更好了。

我尝试在拖动开始时记录event.pageX和event.pageY值，然后通过在拖动开始时执行绝对值来比较它们，因此startPageX - 当前event.pageX＆gt; = startPageY - 当前的event.pageY，但似乎没有效果。

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

Answer 1

使用轴选项像这样：

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

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

此处记录：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});

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

2 个答案: