jQuery sıralanabilir ve atlatılabilir liste

Question

Aradığım şey, aynı öğe üzerinde hem sorgulanabilir hem de atılabilir olarak kullanmamın bir yoludur. 5 elementin bir listesini aldığımı söyleyelim, bunların hepsi sıralanabilir. bir elemanın bir başka birinin ontop bırakıldığında ne ben yapmaya çalışıyorum olduğunu, bu elemanın eklenecek ve listenin dışına gidecek, örnek:

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

Eleman

<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> 

bırakıldı

Eğer bir cevabınız varsa, bunun nasıl yapılacağına dair bir cevap veya kılavuz, çok takdir edilecektir!

Answer 1

HTML: Burada

<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> 

sizin UL için sıralanabilir kodudur. Değişiklik olayını yapılandırmanız gerekiyor. Değişim olayı meydana geldiğinde değişiklik olayı meydana gelir, diğer bir deyişle, düşüş olayı gerçekleşir. değişiklik meydana gelirse, o zaman düştü demektir değilse droppable kodunda

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

, kontrol edin. ILLUSTRATORNG.