Home/ Questions/Q 8094071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:40:38+00:00

How can you get access to the dynamically-changing coordinates of a draggable object? I

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0