如何以编程方式触发可拖动行为

Question

我在 jQuery 中创建了一个“2d 滑块”，其中通过在边界框中拖动“手柄”来同时操作 2 个参数。

我通过在父 div 中嵌套一个“handle”div 并使用 jQuery UI 插件来促进拖动行为来实现这一点。 html 看起来像：

<div class="Slider2d" id="grid_spacing_both">
    <div class="Slider2dHandle" id="grid_spacing_both_handle"></div>
</div>

jQuery 看起来像：

$(".Slider2dHandle").draggable({
    containment: "parent",
    scroll: false,
    drag: function(event, ui) {
        // calculates position and updates value input boxes
    }
});

我还创建了一些代码，将句柄重新定位到父 div 内任何点击的位置：

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
});

我想做的是修改上面的方法，以便用户可以点击某处在父 div 中，将手柄重新定位到单击位置，然后开始拖动手柄，不要松开鼠标按钮。基本上，我需要找出一种以编程方式触发拖动功能的方法。

我在此处和此处，并尝试通过更改上述方法来实现他们的建议，如下所示：

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

这在最技术的意义上是有效的，但它非常慢，并且我从 Safari 收到一堆错误消息，告诉我“RangeError：超出了最大调用堆栈大小”。我认为正在发生的事情是，当我触发句柄上的事件时，它会冒泡到父级，然后父级再次调用触发器，依此类推。我试图通过在 .trigger() 调用之前和之后将 event.stopPropagation 扔到我的代码中来停止冒泡，但无济于事。

因此，如果有人对如何使其正常工作有任何建议，我将非常感激。我有一个备份计划此处，但是在我看来，这似乎不必要地复杂。

谢谢！

Answer 1

我设法让这个工作。正如我怀疑的那样，这与事件处理有关。

修复很简单：我修改了上面的代码来检查事件目标是否与回调绑定到的元素（即滑块边界框）相同。在重新定位手柄的初始单击中，这些是相同的元素。但是，当触发手柄的 mousedown 事件并且该事件向上冒泡到边界框时，该事件的目标是滑块手柄。因此，它们不匹配，并且不会再次调用触发事件，从而引发无限循环。

至少我认为这就是正在发生的事情。无论如何，这是有效的代码：

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle");
    if ($(this).attr("id") == $(event.target).attr("id")) {
        handle.trigger(event);
    }
});

Answer 2

或者您可以在处理程序的 mousedown 事件处停止传播，这样它就不会冒泡到滑块的 mousedown 事件。

$(".Slider2d").mousedown(function(event) {
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

$(".Slider2dHandle").mousedown(function(event) {
    event.stopPropagation();
});

Answer 3

这对我不起作用，所以我认为我做错了什么。但我想知道，如果它适合你，为什么不设置：

if ($(this).attr("id") == $(event.target).attr("id"))

为此：

if (this === event.target)

一旦我弄清楚这一点，我就会更新。

仍然什么也没有：在无限循环期间，event.target 仍然是滑块，而不是手柄，只有那时第二个事件才会真正触发。

编辑：明白了，我从 jQuery 1.7.1 切换到 1.6.4 并且它可以工作。