Giao diện người dùng jQuery xóa phần tử khi được thả vào div bằng cách sử dụng .droppable

Question

Tôi đang cố gắng tìm ra logic về cách thực hiện điều này.

Tôi có nhiều hình ảnh chỉ với tên lớp CSS, chúng được tạo động.

Những hình ảnh này là có thể kéo sử dụng jQuery UI của .draggable.

tôi cần phải có một "thùng rác" rằng khi một phần tử được kéo vào, nó được lấy ra.

Ví dụ: http://jsfiddle.net/KWdcU/3/ (Điều này được thiết lập để loại bỏ tất cả các yếu tố và không phải là người kéo vào nó)

Mã:

<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

Bạn có thể tìm mục đang được kéo bằng cách sử dụng thuộc tính .draggable của phần tử ui được chuyển đến hàm gọi lại của over, như được nêu trong số docs. Như thế này:

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

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

Here's an updated jsFiddle.

---

Từ quan điểm về khả năng sử dụng, tôi khuyên bạn nên sử dụng sự kiện drop thay vì sự kiện over vì việc xóa một mục bằng cách kéo vô tình vào thùng rác vô tình sẽ gây phiền toái.

Answer 2

Tốt hơn để sử dụng thả trong stead hơn

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

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