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

我在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中的某个位置,将句柄重新定位到单击位置,然后开始拖动句柄而不用鼠标按钮.基本上,我需要找到一种以编程方式触发拖动功能的方法.

我找到了一些建议here和here,并试图通过改变上面的方法来实现他们的建议：

$(".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来阻止冒泡,但无济于事.

所以,如果有人对如何使这项工作有任何建议,我真的很感激.我有一个备份计划here,但在我看来这是不必要的复杂.

谢谢！

解决方法

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

修复很简单：我修改了上面的代码来检查事件目标是否与绑定回调的元素相同(即滑块边界框).在重新定位句柄的初始单击上,这些是相同的元素.但是,当触发句柄的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);
    }
});

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

解决方法

相关文章