comment enlever l'élément que si elle est entraînée à l'extérieur du conteneur

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

Cela fonctionne, mais je dois enlever element que si elle est entraînée en dehors de container pas si elle est triée à l'intérieur container.

Une idée?

Answer 1

Il vous suffit de définir accept dans droppable comme ceci:

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