how to remove element only if it is dragged outside of container

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

This works but I need to remove element only if it is dragged outside of container not if it is sorted inside container.

Any idea?

Answer 1

You need only define accept in droppable like this:

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