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

【问题标题】：How to programmatically invoke jQuery UI Draggable drag start?如何以编程方式调用 jQuery UI Draggable 拖动开始？
【发布时间】：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 事件，如stackoverflow.com/q/8759884/165673 中所述，在最新的jQuery 1.9 中为我工作......你能做一个小提琴来展示Max Call 错误是如何发生的吗?
@anber - 抱歉，我从来没有找到解决方案。我最终滚动了自己的可拖动来解决这个问题。

标签： jquery-ui jquery jquery-ui-draggable

【解决方案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 感谢您提供详细信息，可以在这里使用它：stackoverflow.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');
  }
});

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

【讨论】：