title: jquery dragable - remove element on drag
body: <p>Using jQuery-ui I am dropping a draggable element onto a droppable element. I then turn the droppable element into a draggable element. If I then drag the new draggable element I want the element and its contents removed (deleted). I can make the droppable element draggable; however there are two issues:</p>
  
  <ol>
  <li>When I drag the droppable (now draggable) element it does not delete.</li>
  <li>The original element which was dragged into the droppable (now draggable) element can be dragged on its own.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/bkQF1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bkQF1.png" alt="enter image description here"></a></p>
  
  <p>In this eaxample "4WD" was dragged (cloned) into a droppable field below "Activity". The original "4WD" remains draggable (as required). The cloned "4WD" is also draggable (not wanted). The droppable field is now draggable; however, does not delete when dragged.</p>
  
  <p>The code is:</p>
  
  <pre><code>function makeDraggable() {
      $('.dragabbleItem').draggable({
          stack: ".dragabbleItem",
          cursor: 'pointer',
          helper: 'clone',
      });
  }
  
  function makeDraggableRemove() {
  
      $('.dragabbleRemove').draggable({
          cursor: 'pointer',
          drag: function( event, ui ) {
              $(ui.draggable).remove();
          }
      });
  }
  
  function makeDroppable() {
      $('.droppableItem').droppable({
          hoverClass: 'hovered',
          drop: function( event, ui ) {
              var droppable = $(this);
              var draggable = ui.draggable;
              alert( 'The item with ID "' + draggable.attr('id') + '" was dropped onto me!' );
              // Move draggable into droppable
              var drag = $('.droppableItem').has(ui.draggable).length ? draggable : draggable.clone().draggable({
                  revert: "invalid",
                  stack: ".dragabbleItem",
                  helper: 'clone'
                });
              drag.appendTo(droppable);
              droppable.css({top: '5px', left: '5px', background: '#B0C4DE'});
              droppable.droppable('disable');
              droppable.addClass("dragabbleRemove");
              makeDraggableRemove();
          } 
      });
  }
  </code></pre>