Question

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

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：

<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>

将拖动应用于动态更改其子项的容器内的元素是一种方便的方法。我喜欢称之为“拖曳代表团”。

然而随着jQuery 1.3.x＆amp;的发布jQuery 1.6+，上面的脚本停止工作。使用jQuery 1.3.2＆amp; jQuery UI 1.7.1返回错误“太多递归”。

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

Answer 1

上面的答案似乎过于复杂。

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
   $('.draggableObject').trigger(e);
});

Answer 2

事实证明这比你期望的要简单得多。查看.trigger（）方法的文档，没有提到可以将原始事件作为参数提供而不仅仅是事件类型的字符串表示的事实。

因此，可以更有效地实现委托拖动：

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

理想的解决方案是UI库有一些方法可以为动态元素本地执行这种类型的委托....

请注意，这适用于jQuery 1.4.2＆amp; jQuery UI 1.7.2

Answer 3

我的情况是你没有使用jQuery 1.4（因此没有delegate（）方法），还有另一个解决方案。

要阻止发生的递归，你需要做的是在所有元素的mousedown事件上调用stopPropagate（）：

$('drag-me').mousedown(function(ev){
  ev.stopPropagation();
});

同样更改你的代码（注意底部的stopPropagation（）调用）：

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]);
        ev.stopPropagation()
    }
});

这应该可以解决你无休止的复发问题。（至少它在类似的情况下对我有用）

Answer 4

如果您可以发布整个代码示例（使用带有非工作版本的html和相关脚本标记），我可以帮助指出错误和/或验证问题....

但是，我不确定您是否要将 1个对象的数组 [ev]作为触发器调用的第二个参数传递。

documentation说“最后，你可以传递一个带有数据的文字对象。它将被复制到一个真正的jQuery.Event对象。注意你必须在这种情况下指定一个类型属性。”

您可以在编写和/或可能将更多代码或URL粘贴到相关页面时验证它（之前是否应该工作）？我很乐意再看看它。

希望有所帮助。：）

编辑：再看看它。它完全符合您的要求。在mousedown事件中，你做了一些事情，然后通过触发另一个mousedown事件来结束，这个事件会做一些事情然后导致另一个鼠标按下事件等等......等等......

你创造了一个无限循环。

为什么不在页面加载时使相关的div全部可拖动而不是首次点击它们？这不会避免这个问题吗？

另请查看this post，我会非常有兴趣看到一些曾经工作过的代码。如上所述，我不确定我是否理解代码如何模拟完整的“拖动”事件的序列 - 由mousedown，mousemove和mouse up事件组成。让我知道。谢谢！

Answer 5

其他答案对我不起作用，我使用了jquery ui simulate插件

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

$("#myElement").simulate('drag');

在jQuery UI中触发鼠标拖动

5 个答案: