Сортировка элементов остается после удаления()

Question

У меня есть список с сортируемыми элементами, которые можно удалить, если вы поместите их в корзину для мусора. Проблема в том, что элемент остается после его удаления.

<div class="content-remove" id="content-remove"></div> 
<div class="content-elements" id="content-elements"> 
    <div class="element-item"> 
    </div> 
</div> 


$("#content-remove").droppable({ 
     accept: '#menu-contents .element-item', 
     activeClass: 'active-remove', 
     hoverClass: 'active-hover-remove', 
     tolerance: 'pointer', 
     drop: function(event, ui) { 
      ui.draggable.remove(); 
     }, 
     over: function(event, ui) { 
      ui.draggable.css({border: '2px solid #E64746', opacity: '0.7'});     
      ui.droppable.css({border: '2px solid #E64746', opacity: '0.7'}); 
      }, 
     out: function(event, ui) { 
      ui.draggable.css({border: '1px solid #ccc', opacity: '1'}); 
      ui.droppable.css({border: '1px solid #ccc', opacity: '1'}); 
      } 
     }); 
$("#menu-contents .content-elements").sortable({placeholder: 'sortable-placeholder'}).disableSelection(); 

Как вы можете видеть в большом пальце, есть два заполнители, но только один элемент. Как я могу это решить? Спасибо.

Answer 1

Я подозреваю, что вы удаляете ui.draggable, а не оригинальный элемент. Вы можете попробовать что-то вроде:

drop: function(event, ui) { 
    var id = ui.draggable.attr("id"); 
    $("#" + id).remove(); 
}, 

Answer 2

Произошла ошибка. После удаления элемента я попытался получить доступ к методу .css; что вызвало ошибку и выломило остальное.