Two divs are present in different containers. I want to move the div1 in container1 while dragging div2 in container2. (the 'left' property should remain same for div1 and div2 at all times)

I am able to individually drag each of them by applying 'draggable' function. Also I am able to move the div2 while movie div1 by assigning the left property of div1 to the left property of div2 while 'draggable stop' function is called. But this happens only when after the drag event is finished.

Is there a way so that the div2 will move together with div1 all the time while dragging div1?

Please refer to the JSFiddle link to understand what I am trying to do : /

Two divs are present in different containers. I want to move the div1 in container1 while dragging div2 in container2. (the 'left' property should remain same for div1 and div2 at all times)

I am able to individually drag each of them by applying 'draggable' function. Also I am able to move the div2 while movie div1 by assigning the left property of div1 to the left property of div2 while 'draggable stop' function is called. But this happens only when after the drag event is finished.

Is there a way so that the div2 will move together with div1 all the time while dragging div1?

Please refer to the JSFiddle link to understand what I am trying to do : http://jsfiddle/37Wkd/16/

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-draggable

2 Answers 2

$('#block1').draggable({
    axis: 'x',
    containment: '#container1',
    drag: function(){
        $('#block2').css('left',$(this).position().left);  
    }

});​

Doesn't this work? Using the drag event: http://jqueryui./demos/draggable/

Try this:

http://jsfiddle/37Wkd/17/