title: jquery sortable ui remove item when is dragged to a specific div
body: <p>I'm using <a href="http://jqueryui.com/sortable/" rel="nofollow">jQuery sortable</a> plugin </p>
  
  <p>I have two blocks connected one is draggable and the other is only sortable.</p>
  
  <p>What I want to do is when I'm dragging an item from the sortable in to a specific div to remove it.</p>
  
  <p>Here's the markup: </p>
  
  <pre><code>  &lt;div&gt;Draggable source items
      &lt;ul&gt;
          &lt;li class="draggable" class="ui-state-highlight"&gt;Drag me down&lt;/li&gt;
          &lt;li class="draggable" class="ui-state-highlight"&gt;Drag me down 2&lt;/li&gt;
          &lt;li class="draggable" class="ui-state-highlight"&gt;Drag me down 2&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div&gt;Sortable List 1
      &lt;ul class="sortableList"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;
       &lt;!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>   (document).ready(function () {
      $(".sortableList").sortable({
          revert: true,
          /*update: function (event, ui) {
              // Some code to prevent duplicates
          }*/
      });
      $(".draggable").draggable({
          connectToSortable: '.sortableList',
          cursor: 'pointer',
          helper: 'clone',
          revert: 'invalid'
      });
  });
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/LMGg8/8/" rel="nofollow">jsfiddle</a></p>