Не удается удалить перетаскиваемый из droppable

Question

У меня есть jQuery's 1.6.4, перетаскиваемый и отбрасываемый на основе ответов от Stackoverflow post. Кажется, все работает нормально, но я не могу удалить элемент из droppable, когда вы вытаскиваете его из области droppable.

Пожалуйста, обратите внимание на JSfiddle: http://jsfiddle.net/tzp1560b/

Примечание Я использую ".live ('MouseOver', функцию() {" для перемещаемых элементов, как они загружаются через AJAX

HTML. :

<div id="drop"> 
<div class="box"> 
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol> 
</div> 
</div> 

<div id="search_result"> 
<ul class="list-entity"> 
<li id="object-22684"> 
<div class="clearfix"> 
<div class="body"> 
<h4>9032</h4> 
<div class="content"></div> 
</div> 
</div> 
</li> 
<li id="object-22684" class="ui-draggable"> 
<div class="clearfix"> 
<div class="body"> 
<h4>9033</h4> 
<div class="elgg-content"></div> 
</div> 
</div> 
</li> 

</ul> 
</div> 

JQuery:

$(function() { 

    $('#search_result li').live('mouseover',function(){ 
    $(this).draggable({ 
      cursor: "move", 
      //revert: "invalid", 
      opacity: 0.8, 
      appendTo: "body", 
      helper: "clone", 
      start: function(event, ui) { 
       $(ui.helper).width($(this).width()); 
      } 
     }); 
}); 

    $("#drop ol").droppable({ 

     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function (event, ui) { 
      if (ui.draggable.is('.dropped')) return false; 
      $(this).find(".drop-placeholder").remove(); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({ 
       appendTo: "body", 
       helper: "clone" 
      }).addClass('dropped'); 
     } 
    }).sortable({ 
     items: "#drop ol", 
     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"); 
     }, 
     out: function() { 
      ui.item.remove(); 
      $(this).remove(); 
     } 
    }); 

}); 

Может кто-нибудь помочь Спасибо.

Answer 1

Использование $(ui.draggable).remove(); в случае падения, чтобы удалить элемент

http://jsfiddle.net/tzp1560b/1/