Kéo và thả Javascript: xóa phần tử đã kéo sau khi thả thành công

Question

Tôi đang sử dụng tính năng kéo và thả gốc và thả API trong javascript. Làm thế nào tôi có thể loại bỏ một yếu tố kéo từ DOM sau một giọt thành công?

• Tôi đã thử nghe kiện thả, nhưng điều này chỉ xảy ra trên các yếu tố đó được thả vào và không có tham chiếu đến phần tử bị kéo.
• Tôi đã thử nghe phần tử kéo phần, nhưng điều này không cho tôi biết liệu sự sụt giảm có thành công hay không.
• Tôi đang cố gắng tránh lưu trữ phần tử đang được kéo vào biến toàn cầu vì điều này sẽ gây ra sự cố nếu kéo xảy ra giữa các tab hoặc trình duyệt khác nhau.

Dưới đây là một ví dụ: http://jsfiddle.net/KNG6n/3/

Một danh sách các chữ có thể được kéo vào hộp. Khi nút của một chữ cái bị bỏ trên hộp, tôi muốn nó được xóa khỏi danh sách (mà không ảnh hưởng đến bất kỳ mục danh sách nào khác có cùng một chữ cái)

Answer 1

Nghe cho sự kiện dragend và kiểm tra các biến dropEffect của đối tượng dataTransfer trước khi làm bất cứ điều gì với các yếu tố kéo:

htmlElement.addEventListener('dragend', function(event){ 
    if(event.dataTransfer.dropEffect !== 'none'){ 
     $(this).remove(); 
    } 
}); 

Answer 2

Một cách để gán điều này cho một biến nằm ngoài phạm vi dragstart và sử dụng phần tử đó khi bị bỏ.

See this fiddle.

Answer 3

Ngoài ra hãy xem ví dụ này: http://html5demos.com/drag

var el = document.getElementById (e.dataTransfer.getData ('Text'));

el.parentNode.removeChild(el);