title: removing item from accordion after drag
body: <p>I have 4 accordion element on the screen. Users are able to drag and drop elements from one accordion to another. I have managed to implement the drag and drop which works fine. however, after drag an item from one accordion to another, i'd want to delete that particular item from the accordion it has been dragged from. </p>
  
  <p>Code:</p>
  
  <pre><code>$(function() {
  $( "#employee2" ).accordion();
  $( "#employee2 li" ).draggable({
    appendTo: "body",
    helper: "clone"
  
  });
  
   $("#destination").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          $(ui.draggable).clone().appendTo(this); // accordion not work 
          $( this ).find(".destination3").remove(); 
         //  ui.draggable.draggable('disable').appendTo(this);
          //$(ui.draggable).appendTo(this); // accordion work but not clone
          $(".employee2").accordion('refresh');
  
      }
  }).sortable({
    items: "li:not(.destination)",
    sort: function() {
      // gets added unintentionally by droppable interacting with sortable
      // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
      $( this ).removeClass( "ui-state-default" );
    }
  });
    $("#destination2").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          $(ui.draggable).clone().appendTo(this);
          //$(ui.draggable).appendTo(this); // accordion work but not clone
          $(".employee2").accordion('refresh');
      }
  }).sortable({
    items: "li:not(.destination2)",
    sort: function() {
      // gets added unintentionally by droppable interacting with sortable
      // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
      $( this ).removeClass( "ui-state-default" );
    }
  });
  });     
  </code></pre>
  
  <p>Each of the items in the accordion are placed like this:</p>
  
  <pre><code>&lt;h2&gt;&lt;a href="#"&gt;E Lower &lt;/a&gt;&lt;/h2&gt;
   &lt;div class = "eu"&gt;
        &lt;ul id="destination4" class="accordion4"&gt;
          &lt;li&gt;Employee 1&lt;/li&gt;    
          &lt;li&gt;Employee 2&lt;/li&gt;
          &lt;li&gt;Employee 3&lt;/li&gt;
       &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Any advice? </p>
  
  <p>Thanks in advance </p>