jQuery：如何在代码中模拟拖放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1166246/
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
jQuery: How Do I simulate Drag and Drop in Code?
提问by Timothy Khouri
EDIT: Here's a link to show you my sample code: http://www.singingeels.com/jqtest/
编辑：这是一个向您展示我的示例代码的链接：http: //www.singingeels.com/jqtest/
I have a very simple page that references jquery-1.3.2.js, ui.core.js (latest version) and ui.draggable.js (also latest version).
我有一个非常简单的页面，它引用了 jquery-1.3.2.js、ui.core.js（最新版本）和 ui.draggable.js（也是最新版本）。
I have a div that I can drag around very easily (using the mouse of course):
我有一个 div，我可以很容易地拖动它（当然是使用鼠标）：
<div id="myDiv">hello</div>
and then in JavaScript:
然后在 JavaScript 中：
$("#myDiv").draggable();
This is works perfectly. But, I need to be able to simulate a 'drag and drop' using code alone. I have it mostly working, but the problem is that the events that are firing are the placeholder events.
这是完美的作品。但是，我需要能够单独使用代码来模拟“拖放”。我大部分时间都在工作，但问题是触发的事件是占位符 events。
If you open "ui.core.js" and scroll to the bottom... you'll see this:
如果你打开“ui.core.js”并滚动到底部......你会看到：
// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }
Why aren't the events being extended properly in my simulation, but when you click down with the mouse, they are? - Any ideas on how to force the _mouseDrag: property to obey the overriding extension in "ui.draggable.js"?
为什么在我的模拟中事件没有正确扩展，但是当您用鼠标单击时，它们是？- 关于如何强制 _mouseDrag: 属性服从“ui.draggable.js”中的覆盖扩展的任何想法？
Solving this would be huge - and I plan to show the major benefits later.
解决这个问题将是巨大的 - 我计划稍后展示主要好处。
Thanks, -Timothy
谢谢，-蒂莫西
EDIT: Here's a link to show you my sample code: http://www.singingeels.com/jqtest/
编辑：这是一个向您展示我的示例代码的链接：http: //www.singingeels.com/jqtest/
EDIT 2: Click that link above and view-source... you'll see what I'm trying to do. Here's a snippet:
编辑 2：单击上面的链接并查看源代码...您会看到我正在尝试做什么。这是一个片段：
$(document).ready(function() {
var myDiv = $("#myDiv");
myDiv.draggable();
// This will set enough properties to simulate valid mouse options.
$.ui.mouse.options = $.ui.mouse.defaults;
var divOffset = myDiv.offset();
// This will simulate clicking down on the div - works mostly.
$.ui.mouse._mouseDown({
target: myDiv,
pageX: divOffset.left,
pageY: divOffset.top,
which: 1,
preventDefault: function() { }
});
});
回答by StuperUser
There's a question in the JQuery forum about it. It's not resolved at the time of writing, but may have more information in the future.
JQuery 论坛中有一个关于它的问题。在撰写本文时尚未解决，但将来可能会有更多信息。
EDIT:It was answered on the forum:
编辑：它在论坛上得到了回答：
I recommend you use the simulate plugin which is what jQuery UI uses for unit testing drag and drop:
我建议您使用模拟插件，这是 jQuery UI 用于单元测试拖放的插件：
https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js
https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js
You can see examples of use by looking at the unit tests
您可以通过查看单元测试来查看使用示例
https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js
https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js
https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js
https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js
Thanks to rdworth for that.
感谢 rdworth。
回答by Patrick McElhaney
I found a solution that works pretty well. I have the drop event call a function called onDragAndDrop(). That function takes two arguments, the draggablejQuery object and the droppablejQuery object.
我找到了一个效果很好的解决方案。我有 drop 事件调用一个名为onDragAndDrop(). 该函数有两个参数，draggablejQuery 对象和droppablejQuery 对象。
$('.my-drop-target').droppable({
drop: function(event, ui) {
onDragAndDrop(ui.draggable, $(event.target));
}
});
In my tests, I have a function that calls onDragAndDrop directly, but makes sure that a user with a mouse could have performed that action.
在我的测试中，我有一个直接调用 onDragAndDrop 的函数，但要确保使用鼠标的用户可以执行该操作。
var simulateDragAndDrop = function(draggable, droppable) {
if (!draggable.data('uiDraggable')) {
throw new Error('Tried to drag and drop but the source element is not draggable!');
}
if (!droppable.data('uiDroppable')) {
throw new Error('Tried to drag and drop but the target element is not droppable!');
}
onDragAndDrop(draggable, droppable);
}
I've found it to be a nice, easy-to-use solution for unit tests. I'll probably end up using it for a keyboard-accessible fallback as well.
我发现它是一个很好的、易于使用的单元测试解决方案。我可能最终也会将它用于键盘可访问的后备。
