jQuery UI usunąć element po upuszczeniu w div przy użyciu .droppable

Question

Próbuję dowiedzieć się, jak to zrobić.

Mam wiele zdjęć z samą nazwą klasy CSS, są one tworzone dynamicznie.

Te obrazy są przeciągane za pomocą jQuery UI .draggable.

muszę mieć „kosza”, że gdy element jest wciągnięty, jest on usuwany.

Przykład: http://jsfiddle.net/KWdcU/3/ (to jest ustawione, aby usunąć wszystkie elementy, a nie ten wciągnięty IT)

Kod:

<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

Można znaleźć pozycję jest przeciągany za pomocą właściwości .draggable elementu ui przekazywanego do funkcji wywołania zwrotnego over, jak określono w docs. W ten sposób:

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

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

Here's an updated jsFiddle.

---

Z punktu widzenia użyteczności, zalecam używanie zdarzenia drop, a nie over, ponieważ byłoby denerwujące usunięcie elementu przez nieumyślne przeciągnięcie go na kosz.

Answer 2

Lepiej używać kropli zamiast ponad

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

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