title: jQuery UI sortable - dynamically change content on drop
body: <p>I have two blocks, one is "draggable only" and the other is "droppable only".</p>
  
  <p>Inside the first one I have some images which I can drag and drop them into the second one.</p>
  
  <p>After I drop the image from the first block into the second one I want to replace the dropped image with a bigger image.</p>
  
  <p>I'm thinking to use <code>replaceWith()</code> method but the problem is that is replacing also the parent element. </p>
  
  <p>For example, I have this in the "draggable only":</p>
  
  <pre><code>&lt;li class="draggable ui-draggable ui-draggable-handle" id="header-1"&gt;
   &lt;img src="http://placehold.it/150x100"&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and this in the "droppable only" after the element is dragged from the "droppable only":</p>
  
  <pre><code>&lt;img src="http://placehold.it/400x300"&gt;
  </code></pre>
  
  <p>As you noticed the <code>replaceWith()</code> is replacing the parent element also and I don't want this.</p>
  
  <p><strong>Also I need way to dinamically add an image based on what item was dragged.</strong></p>
  
  <p>Right now, is like this : </p>
  
  <pre><code>$('.testing').replaceWith('&lt;img src="http://placehold.it/400x300"&gt;');
  </code></pre>
  
  <p>This will replace every item with the same image and I don't want this.Every item should have it's own image.</p>
  
  <p>This is the JS code for the "draggable only":</p>
  
  <pre><code>$(".draggable").draggable({
       connectToSortable: '.sortableList',
       cursor: 'pointer',
       helper: 'clone',
       revert: 'invalid',
       start: function (event, ui) {
           $(this).addClass('testing');
       }
   }); 
  </code></pre>
  
  <p>and this is fro the "droppable only":</p>
  
  <pre><code>$(".sortableList").sortable({
       receive: function (event, ui) {
           //alert('It works');
           $('.testing').replaceWith('&lt;img src="http://placehold.it/400x300"&gt;');
       }
   });
  </code></pre>
  
  <p>Here's a <a href="http://jsbin.com/dajec/1" rel="nofollow">JSBIN</a> ( HOVER OVER "HEADERS" AND DRAG AND DROP THE IMAGE OVER THE CONTAINER IN THE RIGHT)</p>