Sắp xếp + danh sách lồng nhau với giao diện người dùng jQuery 1.8.2

Question

Câu hỏi này là trên SO, nhưng dường như không có vấn đề nào giống như tôi có.

Khi tôi làm điều gì đó như thế này

$(function(){ 
    $('#unique-ul').sortable({items:'li'}); 
}); 

tôi mong đợi nó "chỉ làm việc". Bởi và lớn, nó có. Tôi có thể kéo bất kỳ <li> từ bất kỳ danh sách nào vào bất kỳ danh sách nào khác và bất kỳ danh sách con nào trong số đó <li> được kéo với nó.

Tuy nhiên, khi kéo, dường như nó thực sự nhầm lẫn về vị trí cần xóa. Đây là một ví dụ sử dụng 1.8.0; nó hiển thị cùng một hành vi.

http://jsbin.com/ewuxi3/

Tất cả các câu trả lời khác tôi đã tìm thấy về vấn đề này dẫn tôi để tin rằng hành vi này được hỗ trợ bởi jQuery UI; ví dụ: đây là lỗi được đăng ký chống lại 1.7 về lồng kéo lồng nhau: http://dev.jqueryui.com/ticket/4333

Tôi không thể tìm thấy bất kỳ ai khác đã gặp sự cố này vì vậy nó cho thấy tôi đang làm điều đó sai. Bất kì manh mối nào?

Answer 1

điều này xảy ra vì Sortable không thực sự biết nếu bạn đang ở trên lồng nhau <li> hoặc có chứa nó. Một giải pháp là sử dụng một cấu trúc như thế này:

<ul> 
    <li><div>Item 1</div> 
    <ul> 
     <li><div>Subitem 1</div></li> 
     <li><div>Subitem 2</div></li> 
    </ul> 
    </li> 
    <li><div>Item 2</div></li> 
    <li><div>Item 3</div></li> 
</ul> 

và thiết lập các tùy chọn toleranceElement: '> div'. Tôi không biết tại sao nó không phải là tài liệu, nhưng nó ở trong đó và nó cho Sortable để đưa vào xem xét chỉ là <div> khi tính toán giao lộ.

Trong trường hợp bạn quan tâm, tôi gần đây developed a plugin giúp việc sắp xếp lồng nhau dễ dàng hơn, cho phép tạo danh sách lồng nhau mới khi đang di chuyển.