3

使用 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 和 jQuery 1.6+ 的发布，上面的脚本停止工作。使用 jQuery 1.3.2 和 jQuery UI 1.7.1 返回错误“递归过多”。

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

4

5 回答 5

12

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

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
   $('.draggableObject').trigger(e);
});
于 2011-05-23T00:04:16.710 回答
3

事实证明它比你想象的要简单得多。查看 .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 和 jQuery UI 1.7.2

于 2010-03-15T13:23:26.600 回答
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()
    }
});

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

于 2010-07-01T09:03:34.057 回答
1

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

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

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

您能否验证它（应该|以前工作过），因为您已经编写和/或可能将更多代码或 URL 粘贴到相关页面？我很乐意再看看它。

希望有帮助。:)

编辑：再看一遍。它正在做你要求它做的事情。在 mousedown 事件中，你做一些事情，然后通过触发另一个 mousedown 事件来结束，该事件将做一些事情，然后导致另一个 mousedown 事件等等......等等......

您已经创建了一个无限循环。

为什么不在页面加载时而不是在第一次单击时让相关的 div 全部可拖动？那不是避免了这个问题吗？

也看看这篇文章，我很想看看一些过去可以工作的代码。正如所写，我不确定我是否理解代码如何模拟完整的“拖动”事件的顺序——由 mousedown、mousemove 和 mouse up 事件组成。让我知道。谢谢！

于 2009-06-09T06:27:59.223 回答
0

其他答案对我不起作用，我确实使用了 jquery ui 模拟插件

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

$("#myElement").simulate('drag');
于 2015-02-01T13:47:33.063 回答