在jquery中模拟鼠标拖动

时间:2012-02-10 14:09:03

标签: jquery jquery-ui

我有这一小段代码,我想模拟div从一个点到另一个点的拖动..我使用了jquery.simulate.js脚本但是我在控制台中得到错误说:“$。 ui.mouse._mouseDown不是函数“

<html>
<head>

<style>
.box {
    background-color:#b0c4de;
}   

</style>

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jquery.simulate.js"></script>

<script>

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

</script>


</head>

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

</body>

</html>

2 个答案:

答案 0 :(得分:9)

如果你真的想模拟拖动(&amp; drop),请使用jQuery模拟扩展插件:
http://j-ulrich.github.com/jquery-simulate-ext

然后你可以使用

$('#myDiv').simulate("drag-n-drop", {dx: 50});

将div 50px向右拖动。

免责声明:我是该插件的作者。

答案 1 :(得分:1)

您是否考虑过使用.animate ()

示例:

$("#block").animate({
    marginRight: "0.4in",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

所以你可以设置div的定位动画!