jQuery UI - programatically move a dropped draggable to another “available” droppable

Question

I have a mini form control where I drag several draggables onto a scale. See my plunk

Ideally, whenever I drop a draggable, I would like to do in the stop( event, ui ) method:

1. check if the droppable already has a draggable (let's call it draggable2)
2. if there is draggable2, I would like to scan my droppables for one that does not have a draggable
3. then move draggable2 to this droppable

Are there APIs/ways to do this programmatically? I know this sounds similar to sortables, but I am strictly looking for the ability to

move a draggable to a droppable

and

to know if a droppable already has a draggable, and be able to identify the draggable

Any help will be greatly appreciated. Thank you.

Answer 1

I have found a way to accomplish this. Although there are no options from the jQuery UI draggables/droppables API, I have managed to track the draggables and droppables by adding unique "id" attributes to track them.

Here is how I approached the following:

move a draggable to a droppable

My approach: Find the coordinates of the target droppable, and update the css of the draggable.

To figure out which dragger was dragged and which dropper received it, I added attributes dragger-id and dropper-id so I could identify them during the drop event:

drop: function( event, ui ){
  // Get the current dragger and dropper ID's
  dropperId = $(this).attr('dropper-id');
  draggerId = ui.draggable.attr('dragger-id');

  // ... more code
}

then I calculated the top and left coordinates for the dragger based on the droppable's values. For this, I used the jQuery's offset() method.

drop_x = $('.droppable').offset().left - $('.draggable').offset().left;
drop_y = $('.droppable').offset().top - $('.draggable').offset().top;

Note: I had to do a difference calculation since draggables are positioned relative to where they start.

Finally, I set the top and left css values:

ui.draggable.css('top', drop_y+'px');  // y-axis
ui.draggable.css('left', drop_x+'px'); // x-axis

---

to know if a droppable already has a draggable, and be able to identify the draggable

For this, I created yet another attribute on the droppable elements to track the dragger-id values. I called it current-dragger so that it would be unique and I could query by it. I used -1 as my default value, meaning "no dragger".

I assigned current-dragger in the drop method as well:

drop: function( event, ui ){
  // Get the current dragger and dropper ID's
  dropperId = $(this).attr('dropper-id');
  draggerId = ui.draggable.attr('dragger-id');

  // Remove current-dragger value from old dropper (-1 means no dragger)
  $('[current-dragger="' + draggerId + '"]').attr('current-dragger', '-1');

  // Update current-dragger on this dropper
  $(this).attr('current-dragger', draggerId);

  // ... more code
}

I suppose there's really no need to do updates to the DOM attributes, so in prod I will be tracking the current dragger inside of a JavaScript mapping object.

For a full working example, see my updated plunk