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

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

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

我试过以下……

 var element = $("
"); element.appendTo("body").draggable().trigger("mousedown"); 

……但这不起作用。

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

---

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

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

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

Answer 1

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

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

这是掠夺者

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

Answer 2

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

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

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

Answer 3

在鼠标hover时创建可拖动的function

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

由于已经完成了可拖动的初始化，因此您将首先点击鼠标

Answer 4

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

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

当相应的事件发生时，将触发附加.bind（）或其快捷方法之一的任何事件处理程序。 但是，可以使用.trigger（）方法手动触发它们。 对.trigger（）的调用以与用户自然触发事件时相同的顺序执行处理程序：

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

Answer 5

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

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

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