如何以编程方式调用 jQuery UI Draggable 拖动开始？

Posted 2023-05-08

【中文标题】如何以编程方式调用 jQuery UI Draggable 拖动开始？

【英文标题】：How to programmatically invoke jQuery UI Draggable drag start?

【发布时间】：2012-12-02 17:19:59

【问题描述】：

我在鼠标处于向下位置之后释放之前创建了一个新的 jQuery 元素。 （鼠标按下后）。

我想使用 jQuery UI 以编程方式在新元素上触发 dragging，以便它会随着我的鼠标移动而自动开始拖动。我不想释放然后再次单击鼠标。

我已经尝试了以下...

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

...但是这不起作用。

有人对如何实现这一点有任何建议吗？

---

更新：经过一番搜索this question 的发帖人有同样的问题。但是，建议的解决方案归结为...

$("body").on("mousedown", function(e)  
  $("<div />").draggable().appendTo("body").trigger(e);
);

...在最新版本的 jQuery 和 jQuery-UI 中不再工作，而是生成一个 Maximum Call Stack Exceeded 错误。

【问题讨论】：

找到解决方案了吗？我发现没有一个答案真的有效。我认为没有人理解这个问题。

在插入的元素上使用.trigger(e) 重新触发mousedown 事件，如***.com/q/8759884/165673 中所述，在最新的jQuery 1.9 中为我工作......你能做一个小提琴来展示Max Call 错误是如何发生的吗?

@anber - 抱歉，我从来没有找到解决方案。我最终滚动了自己的可拖动来解决这个问题。

【参考方案1】：

可拖动插件希望其 mousedown 事件使用其命名空间并指向可拖动对象作为目标。在事件中修改这些字段适用于 jQuery 1.8.3 和 jQuery UI 1.9.2。

$("body").on("mousedown", function(e)  
  var div = $("<div />").draggable().appendTo("body");
  e.type = "mousedown.draggable";
  e.target = div[0];
  div.trigger(e);
);

在这里演示：http://jsfiddle.net/maCmB/1/

【讨论】：

Hrrm .. 它似乎在 chrome 36.0.1985.125 下对我有用。你用的是什么浏览器？

@fuzzyBSc 感谢您提供详细信息，可以在这里使用它：***.com/questions/56571291/…

谢谢，这解决了Maximum Call Stack Exceeded错误！

【参考方案2】：

更新：

见fuzzyBSc's answer below。这是正确的做法。

---

这完全是一个 hack，但它似乎可以解决问题：

  var myDraggable = $('#mydraggable').draggable();
  
  // Yeah... we're going to hack the widget
  var widget = myDraggable.data('ui-draggable');
  var clickEvent = null;
  
  myDraggable.click(function(event)
      if(!clickEvent)
        widget._mouseStart(event);
        clickEvent = event;
      
      else 
        widget._mouseUp(event);
        clickEvent = null;
      
    );
  
  $(document).mousemove(function(event)
    console.log(event);
    if(clickEvent)
      // We need to set this to our own clickEvent, otherwise
      // it won't position correctly.
      widget._mouseDownEvent = clickEvent;
      widget._mouseMove(event);
    
  );

Here's the plunker

我的示例使用了一个已经存在的元素而不是创建一个元素，但它应该类似地工作。

【讨论】：

不习惯plunker的朋友，这里相当于jsfiddle：jsfiddle.net/j6hzt2eb/1

【参考方案3】：

在鼠标悬停时创建您的可拖动函数

$('#futureDragableElement').mouseover(function() 
  $(this).draggable();
);

由于可拖动初始化已经完成，您的第一次鼠标点击将被考虑

【参考方案4】：

你必须将 mousedown 事件绑定到有问题的元素，然后你才能触发该事件。

来自http://api.jquery.com/trigger/

使用 .bind() 或其快捷方式之一附加的任何事件处理程序 当相应的事件发生时触发方法。他们可以 但是，使用 .trigger() 方法手动触发。打电话给 .trigger() 以相同的顺序执行处理程序，如果 该事件是由用户自然触发的：

$('#foo').bind('click', function() 
      alert($(this).text());
    );
    $('#foo').trigger('click');

【讨论】：

感谢您的回复 - 我相信当可拖动初始化时 mousedown 事件已经绑定。

您可能需要仔细检查并确保将可拖动对象绑定到具有特定 ID 的 div，然后您可以将其与触发器一起使用。

【参考方案5】：

如果您在活动期间创建元素并且该元素不太复杂，则不需要黑客攻击。您可以简单地将draggable 设置为mousedown 发生的元素，并使用draggable helper 属性来创建一个将成为您的新元素的助手。在 dragStop 上，将助手克隆到 dom 中您想要的位置。

$('body').draggable(
  helper: function() 
    return '<div>your newly created element being dragged</div>';
  ,
  stop: function (e,ui) 
    ui.helper.clone().appendTo('body');
  
);

当然，你需要为助手设置位置，所以鼠标在它上面。这只是一个非常基本的例子。