How to make two DIVs draggable?

Question

Hi guys, Say I have Div1 and Div2. I want to make that when a user is dragging around Div1, Div2 should also drag along. Any ideas how do I make it?

Here's what I got so far...

$(document).ready(function() {
    $("#apDiv1").draggable();
    $("#apDiv2").draggable(); //<- how do I link it do Div1 ?
});

EDIT ------------------------------------------------------------------

Thanks, I looked into the docs and got so far:

  <script>
$(document).ready(function() {
    $("#apDiv1").draggable();
  });

$( "#apDiv1" ).bind( "drag", function(event, ui) {
                $( "#apDiv2" ).css({ top: event.offsetY, left: event.offsetX });

  </script>

Seems to be right, but... hmm, isn't' working. any ideas?

Answer 1

have a look at http://docs.jquery.com/UI/Draggable#event-drag to see how to bind to a draggable event. Bind the draggable event of div1 to a function that changes the coordinates of div2

Cheers.

Answer 2

Regarding your edit I've made some changes that can be viewed here http://jsfiddle.net/9FrXr/2/

You weren't closing the "drag" bind and instead of event.offsetY and event.offsetX I've used ui.offset.top and ui.offset.x. The drag bind has also been moved into the document.ready function.

$("#apDiv1").bind( "drag", function(event, ui) {
    div.css({ top: ui.offset.top + 52, left: ui.offset.left });
});

Answer 3

Thanks again, got it fully working on the webpage. You can see it in action by moving the menu around at www[dot]skyeye[dot]cc .

  <script>
    $(function() {
    $("#apDiv3").draggable();

    $("#apDiv3").bind("drag", function(event, masterdrag) {
        $("#apDiv5").css({ top: masterdrag.offset.top, left: masterdrag.offset.left-20 });
    });
});

  </script>