title: Jquery Drag and Drop to change div content
body: <p>I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.</p>
  
  <p>When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.</p>
  
  <p>My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?</p>
  
  <p>I hope this makes sense, below is my code.</p>
  
  <p>Many thanks</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;jQuery UI Droppable - Revert draggable position&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #draggable, #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  &lt;/style&gt;
  &lt;script&gt;
  $(function() {
  $( "#draggable" ).draggable({ revert: "valid" });
  $( "#draggable1" ).draggable({ revert: "valid" });
  $( "#droppable" ).droppable({
  activeClass: "ui-state-hover",
  hoverClass: "ui-state-active",
  drop: function( event, ui ) {
  $( this )
  .addClass( "ui-state-highlight" )
  .find( "p" )
  .html( "Dropped!" );
  }
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="draggable" class="ui-widget-content"&gt;
  &lt;p&gt;I revert when I'm dropped&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="draggable1" class="ui-widget-content"&gt;
  &lt;p&gt;I revert when I'm dropped&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="droppable" class="ui-widget-header"&gt;
  &lt;p&gt;Drop me here&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>