jquery drag/drop - get the id of the element being dragged from on drop

Question

Is there a way to get the id (or some other attribute value) from the element being dragged from, when an element is being dropped?

For instance, on the left, I have a stack of divs that I can drop images into. On the right I have a div that holds the images. When I drag an image from the right to a div on the left, I can get info on what was dragged [image name] and what it was dropped on [div id].

If I now want to drag an image from a div on the left to the div on the right, how can I get the id of the div that the image was on when I drop the image on the div on the right.

Sorry if this is confusing.

Answer 1

Below is a runnable solution for you.

You have a container with draggable elements (these could be images) on the left and you have containers on the right in which you can drop these draggable elements. On drop of an element from left to right you will see an alert showing with the id of the element being dropped as well as the container from which the item was dropped.

If you want to know what element an item was dragged from, you can get it by accessing the parent of the dragged element on drop since dragging an element only changes its position relative to its container.

$(function() {
      $( ".draggable" ).draggable();
 
        $( ".droppable, #droppable-inner" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                alert(ui.draggable.attr('id') + ' was dropped from ' + ui.draggable.parent().attr('id'));
                $( this ).addClass( "ui-state-highlight" );
                
                // Move the dragged element into its new container
                ui.draggable.attr('style','position:relative');
                $(this).append(ui.draggable);
                
                return false;
            }            
        });
  });

.draggable { 
  width: 100px;
  padding: 0.5em;
  margin: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

.droppable {
  width: 230px;
  min-height: 120px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="container1" class="droppable">

    <div id="d1" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d2" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d3" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
 
</div>

<div id="container2" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>
 
<div id="container3" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>