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

Question

我在鼠标处于向下位置之前和释放之前创建一个新的jQuery元素.(在mousedown之后).

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

我试过以下......

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

......但这不起作用.

有没有人对如何做到这一点有任何建议？

---

更新: 经过一番搜索,这个问题的海报有同样的问题.然而,建议的解决方案,归结为......

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

...不再适用于最新版本的jQuery和jQuery-UI,而是生成最大调用堆栈超出错误.

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

Answer 2

更新：

请参阅下面 fuzzyBSc 的回答。这是执行此操作的正确方法。

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

  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);
    }
  });

这是笨蛋

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