Is it possible to link two jquery.ui draggables together?

Question

I have two jquery.ui draggables. I am constraining their movement to the y-axis. If one is dragged to a certain y-position, I want the other to automatically move to the same y-position and vice versa. Has anyone ever linked two of these together before?

Answer 1

I haven't done this before, but I suggest using the drag event to adjust the position of the respective other element:

$('.selector').draggable({
    ...,
    drag: function(event, ui) {

    },
    ...
});

The ui object will contain information (in the property ui.offset) you can use to manually reposition the other element.

Answer 2

You would have to explicitly set the Y-Axis of both the elements.

For this either in the event handler functions of both the elements you will have to set Y-Axis or bind both the elements with same function.

Happy coding.

Answer 3

This script looks for the class "group" followed by a number to drag/drop these combined objects. I posted a demo here.

HTML

<div class="demo">
<div id="draggable">
 <p>Drag from here</p>
 <div class="dragme group1"><img src="image1.jpg"><br>Group 1</div>
 <div class="dragme group1"><img src="image2.jpg"><br>Group 1</div>
 <div class="dragme group2"><img src="image3.jpg"><br>Group 2</div>
 <div class="dragme group2"><img src="image4.jpg"><br>Group 2</div>
</div>
<div id="droppable">
 <p>Drop here</p>
</div>
</div>

Script

$(document).ready(function(){
 // function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
 var getAll = function(t){
  return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
 }
 // add drag functionality
 $(".dragme").draggable({
  revert : true,
  revertDuration: 10,  // grouped items animate separately, so leave this number low
  axis : 'y',
  containment : '.demo',
  stop : function(e,ui){
   getAll(ui).css({ 'top' : ui.helper.css('top') }); 
  },
  drag : function(e,ui){
   getAll(ui).css({ 'top' : ui.helper.css('top') });
  }
 });
 $("#droppable").droppable({
  drop : function(e, ui) {
   ui.draggable.appendTo($(this))
   getAll(ui).appendTo($(this));
  }
 })
})