L'interfaccia utente di jQuery rimuove l'elemento quando viene rilasciato in un div utilizzando .droppable

Question

Sto cercando di capire la logica di come farlo.

Ho molte immagini con solo un nome di classe CSS, vengono create dinamicamente.

Queste immagini sono trascinabili con jQuery UI .draggable.

ho bisogno di avere un "cestino" che quando un elemento viene trascinato in, viene rimosso.

Esempio: http://jsfiddle.net/KWdcU/3/ (Questo è impostato per rimuovere tutti gli elementi e non quello trascinato in esso)

Codice:

<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

È possibile trovare l'elemento trascinato utilizzando la proprietà .draggable dell'elemento ui passato alla funzione di callback di over, come specificato in docs. Come questo:

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

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

Here's an updated jsFiddle.

---

Dal punto di vista dell'usabilità, è consigliabile utilizzare l'evento drop anziché l'evento over, in quanto sarebbe noioso eliminare un elemento trascinandolo involontariamente sul cestino.

Answer 2

meglio usare calo invece di oltre

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

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