Bắt buộc phải giữ một mục trong danh sách Giao diện người dùng jQuery

Question

Tôi đã thiết lập danh sách có thể sắp xếp jQuery nhưng tôi cần có thể giữ một số mục có thể sắp xếp 'cố định' tại chỗ và cho các mục khác sắp xếp xung quanh chúng. Tôi nghĩ rằng sẽ có những phương pháp để đạt được điều này, nhưng đây không phải là trường hợp.

tôi có thể thiết lập danh sách và không bao gồm các mục trong câu hỏi:

<ul id="fruit"> 
    <li class="fixed">apples</li> 
    <li>oranges</li> 
    <li>bananas</li> 
    <li>pineapples</li> 
    <li>grapes</li> 
    <li class="fixed">pears</li> 
    <li>mango</li> 
</ul> 

<script type="text/javascript"> 
    $('#fruit').sortable({items: "li:not('.fixed')"}) 
</script> 

này đang ngăn cản tôi từ kéo/thả các mặt hàng này nhưng họ vẫn di chuyển nếu các mục xung quanh họ đều được sắp xếp. Có thể có một cách để làm điều này bằng cách sử dụng nhiều callbacks rằng phương pháp này có nhưng tôi đã không thể làm việc này ra.

Có lẽ phương pháp này sẽ là một bổ sung tốt cho các tùy chọn Giao diện người dùng có thể sắp xếp?

Answer 1

tôi quản lý để thực hiện điều này bằng cách sửa đổi bồn chồn mã một chút và đính kèm nó vào sự kiện "thay đổi" thay vì "dừng". Tôi đã làm điều đó bằng cách xem cách chỉ mục thay đổi khi kéo một mục xung quanh và thiết lập một số điều kiện. Nó cũng hoạt động với nhiều phần tử cố định. Biến "lockto" xác định vị trí của phần tử cố định và phần tử cố định phải ở vị trí này ban đầu. Bạn có lẽ có thể viết lại nó và bọc nó trong một hàm để bạn không cần phải tự đặt biến "lockto" cho tất cả các phần tử cố định.

$("#sortable").sortable({ 
    "cancel":"li.static", 
    "change":function(event,ui) { 
     var lockto = 6; 
     var thisindex = $(ui.helper).index(fixed);   
     var fixed = $("#static-"+lockto);   
     var index = $("#sortable li").index(fixed); 
     var targetindex = lockto+1; 
     if(index !== targetindex) {   
      if(index > targetindex) { 
       fixed.prev().insertAfter(fixed); //move it up by one position 
      } else if(index==(targetindex-1) && thisindex>targetindex) { 
       //don't move it at all 
      } else { 
       fixed.next().insertBefore(fixed); //move it down by one position 
      } 
     } else if(index==targetindex && thisindex>targetindex) { 
      fixed.prev().insertAfter(fixed); //move it up by one position 
     }  
    } 
}); 

Answer 2

Điều này là không tầm thường tôi đoán. Ví dụ bạn nó vẫn còn khả thi với một công việc ít (một giải pháp chung sẽ là một chút khó khăn hơn)

Kiểm tra http://jsbin.com/etubi/2 cho một bản demo (http://jsbin.com/etubi/2/edit cho mã)

$("#sortable").sortable({ 
    cancel: "li.fixed", //exclude fixed ones 
    stop:function(event, ui) { 
     //nothing to do for #f0 as you can't sort anything above it 
     var f5 = $("#f5"); 
     var indf5 = $("#sortable li").index(f5); 
     //if f5 not in right position -> swap position 
     if(indf5 !== 5) { 
      if(indf5 > 5) { 
       f5.prev().insertAfter(f5); //move it up by one position 
      } else { 
       f5.next().insertBefore(f5); //move it down by one position 
      } 
     } 
    } 
}); 

Answer 3

Chúc các bạn đã xem câu hỏi này trước khi đăng bài và đã thực hiện tất cả nghiên cứu có thể sắp xếp. Đây có thể là một điểm khởi đầu tốt. Dù sao, đây là JQuery Sortable set item to an index programmatically một giải pháp chung cho vấn đề này.

Answer 4

Bạn có thể sử dụng tùy chọn sắp xếp được "hủy"

Ex:

$("#sortable").sortable({ 
    cancel: "li.group_elem" 
}); 

Bằng cách này, các yếu tố li có class "group_elem", sẽ không được sắp xếp.