在jQuery UI中触发鼠标拖动 [英] Trigger Mouse Dragging in jQuery UI

问题描述

使用jQuery 1.2.x和jQuery UI 1.5.x，就可以像这样手动触发拖动:

Using jQuery 1.2.x and jQuery UI 1.5.x, one was able to trigger dragging manually like so:

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
    target.draggable({
        helper: "clone",
        start: function()
        {
            console.log("drag start");
        },
        stop: function()
        {
            jQuery(this).draggable("destroy");
        }
    }).trigger("mousedown.draggable", [ev]);
} });

它适用于以下HTML:

It is applied to the following HTML:

<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>

这是一种方便的方法，可将拖动应用于其子级动态更改的容器内的元素.我喜欢称其为拖动委托".

It was a handy way to apply dragging to elements inside a container that has its children changed dynamically. I like to call it "drag delegation".

但是，随着jQuery 1.3.x及更高版本的发布， jQuery 1.6+，以上脚本停止工作.使用jQuery 1.3.2& jQuery UI 1.7.1返回错误太多的递归".

However with the release of jQuery 1.3.x & jQuery 1.6+, the script above stopped working. Using jQuery 1.3.2 & jQuery UI 1.7.1 returns an error "too much recursion".

如何触发手动拖动?有什么建议吗?

How can I trigger dragging manually? Any suggestions?

推荐答案

事实证明，它比您期望的要简单得多.在.trigger()方法的文档中，没有提到一个事实，即也可以将原始事件作为参数提供，而不仅仅是事件类型的字符串表示形式.

It turns out to be much simpler than you'd expect. Looking at the .trigger() method's documentation, no mention is made to the fact that one can also supply the original event as an argument and not just a string representation of the event type.

因此，这样可以更有效地实现委托拖动:

Thus one can achieve delegated dragging more efficiently like so:

$("ul#dynamiclist").delegate("li", "mousedown", function(event) {
    $(this).draggable({
            helper: "clone",
            cursorAt: { left: 5, top: -5 },
            cursor: "move",
            stop: function() {
                    $(this).draggable("destroy");
            }
    }); });

理想的解决方案是使UI库具有某种方法来对动态元素本地执行这种类型的委派....

The ideal solution would have been for the UI library to have some method to perform this type of delegation natively for dynamic elements....

请注意，这适用于jQuery 1.4.2& jQuery UI 1.7.2

Note that this is applicable to jQuery 1.4.2 & jQuery UI 1.7.2

这篇关于在jQuery UI中触发鼠标拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！