jQuery UI eliminar elemento cuando se coloca en un div mediante .droppable

Question

Estoy tratando de averiguar la lógica de cómo hacerlo.

Tengo muchas imágenes con solo un nombre de clase CSS, se crean dinámicamente.

Estas imágenes se pueden arrastrar utilizando la interfaz de usuario jQuery .draggable.

Es necesario disponer de un "bote de basura" que cuando un elemento se arrastró hasta, se elimina.

Ejemplo: http://jsfiddle.net/KWdcU/3/ (Esto se establece para eliminar todos los elementos y no el uno arrastrado en él)

Código:

<div class ="box"> 
<div class="stack">one</div> 
<div class="stack">two</div> 
</div> 
<div id="trash">trash</div>​ 



$(function() { 
     $(".stack").draggable(); 
}); 

$('#trash').droppable({ 
      over: function() { 
      //alert('working!'); 
      $('.box').remove(); 
      } 
    }); 

Answer 1

Puede encontrar el artículo que se arrastra utilizando la propiedad .draggable del elemento ui que se pasa a la función de devolución de llamada de over, como se especifica en el docs. De esta manera:

$(function() { 
    $(".stack").draggable(); 

    $('#trash').droppable({ 
     over: function(event, ui) { 
      ui.draggable.remove(); 
     } 
    }); 
}); 

Here's an updated jsFiddle.

---

Desde el punto de vista de la usabilidad, recomendaría usar el evento drop en lugar del evento over, ya que sería molesto eliminar un elemento arrastrándolo involuntariamente sobre la papelera.

Answer 2

mejor utilizar gota en lugar de más

$(function() { 
    $(".stack").draggable(); 

    $('#trash').droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
     } 
    }); 
});