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

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'));
        }                    
    });
}