jQuery：如何在代码中模拟拖放？ [英] jQuery: How Do I simulate Drag and Drop in Code?

问题描述

编辑：以下是一个链接，以显示我的示例代码： http://www.singingeels.com/jqtest /

Here's a link to show you my sample code: http://www.singingeels.com/jqtest/

我有一个非常简单的页面，引用了jquery-1.3.2.js，ui.core.js（最新版本）和ui.draggable。 js（也是最新版本）。

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).

我有一个div，可以很容易地拖动（使用鼠标当然）：

I have a div that I can drag around very easily (using the mouse of course):

<div id="myDiv">hello</div>

然后在JavaScript中：

and then in 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.

如果您打开ui.core .js并滚动到底部...你会看到这样的：

If you open "ui.core.js" and scroll to the bottom... you'll see this:

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

为什么在我的模拟中事件不能正常扩展，但是当您点击老鼠，他们是？ - 有关如何强制_mouseDrag：属性遵循ui.draggable.js中的覆盖扩展名的任何想法？

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"?

解决这个问题将是巨大的 - 我计划显示以后的主要好处。

Solving this would be huge - and I plan to show the major benefits later.

谢谢，
-Timothy

Thanks, -Timothy

编辑：这里有一个链接向我显示示例代码： http://www.singingeels.com/jqtest/

Here's a link to show you my sample code: http://www.singingeels.com/jqtest/

编辑2：点击上面的链接和查看源...你会看到我正在做什么。这是一个代码片段：

EDIT 2: Click that link above and view-source... you'll see what I'm trying to do. Here's a snippet:

$(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() { }
    });
});

推荐答案

有一个在JQuery论坛中有关于它的问题。在撰写本文时，它还没有解决，但将来可能会有更多的信息。

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.

编辑： / strong>在论坛上回答：

It was answered on the forum:

我建议您使用模拟插件，这是jQuery UI用于单元测试的拖动和drop：

I recommend you use the simulate plugin which is what jQuery UI uses for unit testing drag and drop:

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/events.js

谢谢到rdworth为止。

Thanks to rdworth for that.

这篇关于jQuery：如何在代码中模拟拖放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！