如何以编程方式调用 jQuery UI Draggable 拖动开始？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13883214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to programmatically invoke jQuery UI Draggable drag start?
提问by user1031947
I create a new jQuery element after the mouse is in a down position and before it is released. (After mousedown).
在鼠标处于向下位置之后和释放之前，我创建了一个新的 jQuery 元素。（鼠标按下后）。
I would like to programmatically trigger draggingon the new element using jQuery UI, so that it will automatically begin dragging with my mouse movement. I don't want to have to release and then click the mouse again.
我想dragging使用 jQuery UI以编程方式触发新元素，以便它会随着我的鼠标移动自动开始拖动。我不想释放然后再次单击鼠标。
I have tried the following...
我尝试了以下...
var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");
...however this does not work.
......但是这不起作用。
Does anyone have any suggestions on how to accomplish this?
有没有人对如何实现这一目标有任何建议？
UPDATE:After some searching the poster of this questionhas the identical problem. However the suggested solution, which boils down to...
更新：经过一番搜索这个问题的海报有同样的问题。然而，建议的解决方案归结为......
$("body").on("mousedown", function(e) {
$("<div />").draggable().appendTo("body").trigger(e);
});
...no longer works in the latest versions jQuery and jQuery-UI, and instead generates a Maximum Call Stack Exceeded error.
...不再适用于最新版本的 jQuery 和 jQuery-UI，而是生成最大调用堆栈超出错误。
采纳答案by NanoWizard
This is totally a hack, but it seems to do the trick:
这完全是一个黑客，但它似乎可以解决问题：
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);
}
});
My example uses an element that already exists instead of creating one, but it should work similarly.
我的示例使用一个已经存在的元素而不是创建一个元素，但它的工作方式应该类似。
回答by fuzzyBSc
The draggable plugin expects its mousedown events to use its namespace and to point to the draggable object as the target. Modifying these fields in the event works with jQuery 1.8.3 and jQuery UI 1.9.2.
可拖动插件期望其 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);
});
Demo here: http://jsfiddle.net/maCmB/1/
演示在这里：http: //jsfiddle.net/maCmB/1/
回答by sdespont
Create your draggable function on mouseover
在鼠标悬停时创建可拖动功能
$('#futureDragableElement').mouseover(function() {
$(this).draggable();
});
As the draggable initialization has already be done, your first mouse click will be taken into account
由于可拖动初始化已经完成，您的第一次鼠标点击将被考虑在内
回答by Jay Blanchard
You have to bind the mousedown event to the element in question, then you can trigger the event.
您必须将 mousedown 事件绑定到相关元素，然后才能触发该事件。
From http://api.jquery.com/trigger/
来自http://api.jquery.com/trigger/
Any event handlers attached with .bind() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:
当相应的事件发生时，任何附加了 .bind() 或其快捷方法之一的事件处理程序都会被触发。但是，它们可以使用 .trigger() 方法手动触发。对 .trigger() 的调用以与用户自然触发事件相同的顺序执行处理程序：
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
回答by Maciej Krawczyk
Hacks are not needed if you are creating the element during the event and that element is not too complicated. You can simply set draggable to the element that mousedown occurs and use draggable helper property to create a helper that is going to be your new element. On dragStop clone the helper to the location in dom you want.
如果您在活动期间创建元素并且该元素不太复杂，则不需要 Hack。您可以简单地将 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');
}
});
Of course you would need to set position for the helper, so mouse is on it. This is just a very basic example.
当然，您需要为助手设置位置，因此鼠标在其上。这只是一个非常基本的例子。
