jQuery यूआई हटाएं तत्व का उपयोग करते हुए एक div में गिरा दिया गया है .droppable

Question

मैं यह कैसे करना है इसका तर्क जानने का प्रयास कर रहा हूं।

मेरे पास केवल एक सीएसएस वर्ग नाम के साथ कई छवियां हैं, वे गतिशील रूप से बनाई गई हैं।

इन छवियों का उपयोग कर खींचने योग्य हैं jQuery यूआई के .draggable.

मैं एक "कचरा कर सकते हैं" यह है कि जब एक तत्व में घसीटा जाता है, यह निकाल दिया जाता है की आवश्यकता है।

उदाहरण: http://jsfiddle.net/KWdcU/3/

कोड (यह सभी तत्वों और नहीं भी इसे में घसीटा दूर करने के लिए सेट कर दिया जाता):

<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

आप आइटम प्राप्त कर सकते हैं .draggableui तत्व का उपयोग करकेके कॉलबैक फ़ंक्शन को पास किया जा रहा है, जैसा कि docs में विशिष्ट है। इस तरह:

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

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

Here's an updated jsFiddle।

---

उपयोगिता दृष्टिकोण से, मैं over ईवेंट की बजाय drop ईवेंट का उपयोग करने की अनुशंसा करता हूं, क्योंकि यह किसी आइटम को ट्रैशकेन पर अनजाने में खींचकर परेशान करना होगा।

Answer 2

बेहतर की

से अधिक

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

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