jQuery draggable - how to access the coordinates

coordinates, draggable, jquery

Solution

You can use `drag` event of draggable:

$("#obj1").draggable({
    drag: function(event, ui) {
        var pos = ui.position;
        $("#obj2").css({
            left: pos.left + 100,
            top: pos.top + 100
        });
    }
});​

DEMO: http://jsfiddle.net/kPEfL/

Problem

How can you get access to the dynamically-changing coordinates of a draggable object? I don't just want the coordinates at `stop`, but a constant stream of position information. In other words, if I drag `object A` around, I should be able to get `object B` to move around in parallel by (1) observing the changes in `object A` and then (2) applying them to the position of `object B`. In this code, I want the red block (`obj2`) to move with the blue (`obj1`). ``` <html> <head> <style> #obj1 { position:fixed; top:50px; left:50px; width: 40px; height: 40px; background-color: blue; } #obj2 { position:fixed; top:150px; left:150px; width: 40px; height: 40px; background-color: red; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#obj1').draggable(); }) </script> </head> <body> <div id="obj1"></div> <div id="obj2"></div> </body> </html> ```

Original source