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

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

我设法让这个工作.我怀疑它与事件处理有关.

修复很简单:我修改了上面的代码来检查事件目标是否与绑定回调的元素相同(即滑块边界框).在重新定位句柄的初始单击上,这些是相同的元素.然而,当被触发手柄的鼠标按下事件,和事件冒泡的边框,目标是事件是滑块手柄.因此,它们不匹配,并且不会再次调用触发器事件,从而引发无限循环.

至少我认为这是正在发生的事情.在任何情况下,这是有效的代码:

$(".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);
    }
});