Làm cách nào để kết nối nhiều danh sách có thể sắp xếp với nhau trong giao diện người dùng jQuery?

Question

Tôi mới sử dụng jQuery và tôi hoàn toàn đang gặp khó khăn khi sử dụng giao diện người dùng jQuery sortable.

Tôi đang cố gắng tổng hợp một trang để tạo điều kiện nhóm và sắp xếp các mục.

Trang của tôi có danh sách các nhóm và mỗi nhóm chứa danh sách các mục. Tôi muốn cho phép người dùng có thể làm như sau:

1. Sắp xếp lại các nhóm
2. Sắp xếp lại các mục trong các nhóm
3. Di chuyển các mục giữa các nhóm

Hai yêu cầu đầu tiên là không có vấn đề gì. Tôi có thể sắp xếp chúng tốt. Vấn đề đi kèm với yêu cầu thứ ba. Tôi không thể kết nối những danh sách đó với nhau. Một số mã có thể hữu ích. Đây là đánh dấu.

<ul id="groupsList" class="groupsList"> 
    <li id="group1" class="group">Group 1 
    <ul id="groupItems1" class="itemsList"> 
     <li id="item1-1" class="item">Item 1.1</li> 
     <li id="item1-2" class="item">Item 1.2</li> 
    </ul> 
    </li> 
    <li id="group2" class="group">Group 2 
    <ul id="groupItems2" class="itemsList"> 
     <li id="item2-1" class="item">Item 2.1</li> 
     <li id="item2-2" class="item">Item 2.2</li> 
    </ul> 
    </li> 
    <li id="group3" class="group">Group 3 
    <ul id="groupItems3" class="itemsList"> 
     <li id="item3-1" class="item">Item 3.1</li> 
     <li id="item3-2" class="item">Item 3.2</li> 
    </ul> 
    </li> 
</ul> 

tôi đã có thể sắp xếp danh sách bằng cách đặt $('#groupsList').sortable({}); và $('.itemsList').sortable({}); trong document ready function. Tôi đã thử sử dụng tùy chọn connectWith cho sortable để làm cho nó hoạt động, nhưng tôi đã thất bại một cách ngoạn mục. Những gì tôi muốn làm là có mỗi danh sách groupItemsX được kết nối với mọi danh sách groupItemsX nhưng chính nó. Tôi nên làm như thế nào?

---

Tôi đã nghĩ rằng tôi cần đặc biệt không kết nối danh sách với chính nó ít hơn có một số loại tham chiếu vòng tròn. Cấp, tôi không làm việc với Excel, nhưng nó có vẻ như có thể gây ra một số loại không bao giờ kết thúc đệ quy mà có thể gây ra một tràn ngăn xếp hoặc một cái gì đó. Hmm. Xin lỗi vì chơi chữ. Không thể giúp bản thân mình.

Dù sao, tôi đã cố gắng để làm một cái gì đó như thế này, và nó đã không làm việc:

$('.groupsList').sortable(); // worked great 
$('.groupsList').each(function() { 
    $(this).sortable({ 
     connectWith: ['.groupsList':not('#'+ $(this).attr('id'))]; 
    }); 
}); 

Tôi chắc rằng tôi đã hoàn toàn lẫn lộn các cú pháp đó, và tôi cho rằng đó là lý do tôi đã đặt câu hỏi ngay từ đầu. Có cần thiết hay hiệu quả để lọc mục hiện tại ra khỏi danh sách?

Cả hai câu trả lời do Adam và JimmyP cung cấp đều hoạt động trong IE (mặc dù chúng hoạt động thực sự kỳ lạ trong FireFox, ghi đè lên các mục danh sách khi bạn cố gắng sắp xếp lại). Tôi sẽ chấp nhận một trong những câu trả lời của bạn và bỏ phiếu cho câu trả lời khác, nhưng nếu bạn có ý tưởng/đề xuất về việc lọc, tôi muốn nghe nó.

Answer 1

Bạn có thể đưa cú pháp bạn đã sử dụng cho connectWith không? Bạn đã đặt danh sách các nhóm khác bên trong dấu ngoặc vuông (ngay cả khi đó là bộ chọn)? Đó là:

...sortable({connectWith:['.group'], ... } 

Answer 2

này nên làm việc:

$('#groupsList').sortable(); 
$('.itemsList').sortable({ 
    connectWith: $('.itemsList') 
}); 

Answer 3

$(function() { 
      $("#groupItems1, #groupItems2, #groupItems3").sortable({ 
       connectWith: ".itemsList" 
      }).disableSelection(); 
     }); 

này sẽ đi tất cả tiền phạt dành cho bạn! làm điều tương tự ở đây cho tôi. KHÔNG yêu cầu thay đổi trong HTML của bạn.