Jquery ui 如何以编程方式调用jQuery UI可拖动拖动启动？

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

我希望使用jqueryui以编程方式触发新元素上的

拖动

，这样它将随着我的鼠标移动自动开始拖动。我不想释放鼠标，然后再次单击鼠标

我试过以下方法

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

var元素=$（“”）；
element.appendTo（“body”）.draggable（）.trigger（“mousedown”）；

…但是，这不起作用

有人对如何做到这一点有什么建议吗

---

更新：在搜索了一段时间后，的海报出现了相同的问题。然而，建议的解决方案，归结起来是

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

$（“body”）。在（“mousedown”上，函数（e）{
$（“”）.draggable（）.appendTo（“body”）.trigger（e）；
});

---

…在最新版本的jQuery和jQuery UI中不再工作，而是生成一个超出最大调用堆栈的错误。

您必须将mousedown事件绑定到相关元素，然后才能触发该事件

从

任何附加了.bind（）或其快捷方式之一的事件处理程序 方法在相应事件发生时触发。他们可能是 但是，使用.trigger（）方法手动激发。打电话给 .trigger（）以与以下情况相同的顺序执行处理程序： 事件由用户自然触发：

---

在鼠标上方创建可拖动的函数

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

---

由于Dragable初始化已经完成，您的第一次鼠标点击将被考虑在内

Dragable插件希望其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);
});

$（“body”）。在（“mousedown”上，函数（e）{
var div=$（“”）.draggable（）.appendTo（“body”）；
e、 type=“mousedown.draggable”；
e、 目标=div[0]；
第二部分（e）；
});

此处演示：

更新： 看。这是正确的方法

---

这完全是一个黑客，但它似乎做到了：

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

---

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

如果您在事件期间创建元素，并且该元素不太复杂，则不需要进行黑客攻击。您可以简单地将Dragable设置为mousedown发生的元素，并使用Dragable helper属性创建一个将成为新元素的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');
  }
});

$（'body'）。可拖动({
助手：函数（）{
返回“正在拖动您新创建的元素”；
},
停止：功能（e、ui）{
ui.helper.clone（）.appendTo（'body'）；
}
});

---

当然，您需要为辅助对象设置位置，所以鼠标位于辅助对象上。这只是一个非常基本的示例。

感谢您的回复-我相信当Dragable初始化时，mousedown事件已经绑定。您可能需要再次检查，并确保您将Dragable绑定到一个具有特定id的div，然后可以与trigger一起使用。是否找到解决方案？我发现没有一个答案是有效的。我认为没有人理解这个问题。在插入的元素上使用

.trigger（e）

重新触发mousedown事件，如中所述，使用最新的jQuery 1.9为我工作。。。你能做一个小提琴来显示Max Call错误是如何发生的吗？@anber-不，对不起，我从来没有找到解决方案。我最终用我自己的draggable解决了这个问题。Hrrm。。它似乎在chrome 36.0.1985.125下对我有效。您使用的浏览器是什么？@fuzzyBSc感谢您提供的详细信息，我们可以在这里使用它：对于那些不习惯使用plunker的人，这里是等效的JSFIDLE：

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