jQuery क्रमबद्ध और ड्रॉप करने योग्य सूची

Question

तो मैं जो खोज रहा हूं वह एक ही तत्व पर क्रमबद्ध और ड्रॉपपेबल दोनों का उपयोग करने का एक तरीका है। आइए कहें कि मेरे पास 5 तत्वों की एक सूची है, ये सब क्रमबद्ध हैं। जब एक तत्व एक दूसरे के ontop गिरा दिया जाता है क्या मुझे क्या करना कोशिश कर रहा हूँ है, यह उस तत्व को संलग्न करें और सूची से बाहर जाना होगा, उदाहरण:

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

तत्व

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item 
     <ul> 
       <li>List Item Dropped</li> 
     </ul> 
    </li> 

</ul> 

गिरा कर दिया गया है

यदि आपके पास कोई सुराग है या यह कैसे किया जाए इस पर दिशानिर्देश की बहुत सराहना की जाएगी!

Answer 1

HTML:

<ul id="theUL"> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
    <li class="item">List Item</li> 
</ul> 

यहाँ अपने यूएल के लिए sortable कोड है। आपको परिवर्तन ईवेंट कॉन्फ़िगर करने की आवश्यकता है। घटना घटना तब होती है जब सॉर्ट घटना होती है, अन्यथा, इसका मतलब है कि ड्रॉप ईवेंट होता है।

$("#theUL").sortable({ 
    revert: true, 
    items: "li", 
    change: function(event, ui) {ui.helper.addClass("change");}, 
    beforeStop: function(event, ui) {ui.helper.removeClass("change");} 
}); 

ड्रॉप करने योग्य कोड में, जांचें कि परिवर्तन होता है, यदि नहीं, तो इसका मतलब है कि गिरा दिया गया है।

$(".item").droppable({ 
    accept: function(el) { 
     return el.hasClass('item'); 
    }, 
    drop: function (event, ui) { 
     item=ui.draggable; 
     if(!item.hasClass('change')){ 
      //dropped! 
     } 
    } 

});