CODEWITHSUNDEEP
jqueryjquery-ui
user1184100
user1184100

Reputation: 6894

simulate mouse drag in jquery

I have this small piece of code and i want to to simulate the drag of div from one point to another .. i used jquery.simulate.js script for this but i get error in the console saying.. "$.ui.mouse._mouseDown is not a function"

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

Upvotes: 2

Views: 7878

Answers (2)

Ignitor
Ignitor

Reputation: 3075

If you really want to simulate a drag (& drop), use the jQuery simulate extended plugin:
http://j-ulrich.github.com/jquery-simulate-ext

Then you can use 

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

to drag the div 50px to the right.

Disclaimer: I'm the author of the plugin.

Upvotes: 9

mas-designs
mas-designs

Reputation: 7556

Have you thougt of using .animate () ?

Example: 

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

So you could animate the repositioning of your div !

Upvotes: 1

Related Questions