jQuery:如何在代码中模拟拖放?

前端之家收集整理的这篇文章主要介绍了jQuery:如何在代码中模拟拖放?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
编辑:这是一个链接,以显示我的示例代码http://www.singingeels.com/jqtest/

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

我有一个div,我可以很容易地拖动(使用鼠标当然):

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

然后在JavaScript中

$("#myDiv").draggable();

这是完美的工作。但是,我需要使用代码来模拟“拖放”。我的工作主要是工作,但问题是正在发射的事件是占位符事件。

如果您打开“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; }

为什么在我的模拟中事件不能正常扩展,但是当您用鼠标点击时,它们是? – 有关如何强制_mouseDrag:属性遵循“ui.draggable.js”中的覆盖扩展名的任何想法?

解决这个问题是巨大的 – 我打算在后面显示主要好处。

谢谢,
-Timothy

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

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

解决方法

有一个 question in the JQuery forum about it.它在写作时没有解决,但将来可能会有更多的信息。

编辑:在论坛上回答:

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为此。

猜你在找的jQuery相关文章