如何以编程方式触发可拖动行为 [英] How to trigger draggable behaviour programmatically

问题描述

我在jQuery中创建了一个"2d滑块"，其中通过在边界框内拖动句柄"来同时操纵2个参数.

I've created a "2d slider" in jQuery in which 2 parameters are manipulated simultaneously by dragging a "handle" within a bounding box.

我已经通过在父div内嵌套一个"handle" div并使用jQuery UI插件来促进拖动行为来实现此目的. html看起来像:

I've implemented this by nesting a "handle" div within a parent div, and using the jQuery UI plugin to facilitate the dragging behaviour. The html looks like:

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

jQuery看起来像:

The jQuery looks like:

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

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

I've also created some code that repositions the handle to the location of any clicks within the parent div:

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

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

What I would like to do is modify the above method so that the user can click somewhere in the parent div, have the handle repositioned to the click location, and then begin dragging the handle without letting the mouse button up. Basically, I need to figure out a way to programmatically trigger the drag functionality.

我在此处和此处，并尝试通过更改上述内容来实施其建议像这样的方法:

I found a few suggestions here and here, and attempted to implement their recommendations by changing the above method like so:

$(".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抛出到我的代码中来停止冒泡，但无济于事.

This works in the most technical sense, but its super slow and I get a bunch of error messages from Safari telling me "RangeError: Maximum call stack size exceeded." What I'm thinking is happening is that the when I trigger the event on the handle, it bubbles up to the parent, which then calls the trigger again and so on and so on. I've tried to stop the bubbling by throwing an event.stopPropagation into my code before and after the .trigger() call, but to no avail.

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

So, if anyone has any suggestions on how to get this working I'd really appreciate it. I have a backup plan here, but this seems to me to be unnecessarily complicated.

谢谢！

推荐答案

我设法使它正常工作.我怀疑，这与事件处理有关.

I managed to get this working. As I suspected, it had something to do with event handling.

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

The fix was simple: I modified the above code to check if the event target was the same as the element to which the callback was bound (ie, slider bounding box). On the initial click that repositions the handle, these are the same elements. However, when the handle's mousedown event is triggered, and the event bubbles up to the bounding box, the target of that event is the slider handle. So, they don't match, and the trigger event isn't called again, setting off an infinite loop.

至少我认为是这样.无论如何，这是有效的代码:

At least I think that's what's going on. In any case, here's the code that worked:

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

这篇关于如何以编程方式触发可拖动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！