仅当元素被拖到容器外时如何删除元素

Question

<div class='container'>
<div class='element'>lorem ipsum</div>
<div class='element'>lorem ipsum</div>
<div class='element'>lorem ipsum</div>
<div class='element'>lorem ipsum</div>
</div>

$('.container').sortable({
stop: function(event, ui) {
    ui.item.remove(); 
}
});

这可行，但我需要删除 element 仅当它被拖到 container 之外而不是如果它在 container 内排序。

有什么想法吗？

Answer 1

您只需要像这样在droppable 中定义accept：

jsfiddle

html

<div class="element">Drag me</div>
<div id="content">
  <div class="container">
   drop here (container)
  </div>
</div>

JavaScript

$(init);

function init() {
    $('.element').draggable({
        containment: '#content',
        cursor: 'move',
        helper: 'clone',
        revert: "invalid",
    });

    $('.container').droppable({
        hoverClass: 'validClass',
        accept: '.element',
        drop: function (event, ui) {
            var draggedElement = ui.draggable.clone();
            $(event.target).append(draggedElement.html('dragged'));
        }                    
    });
}