強制項目在jQuery UI中保留原狀可排序列表

Question

我已經設置了一個jQuery可排序列表，但我需要能夠將某些項目保留在可排序的「固定」位置，並對其他項目進行排序在他們旁邊。我認爲會建立方法來實現這一點，但事實並非如此。

我能夠設置列表，不包括有問題的項目：

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

這將停止從我拖/丟棄這些物品，但如果他們周圍的項目進行排序，他們仍然移動。可能有一種方法可以使用此方法具有的許多回調來完成此操作，但我一直無法解決這個問題。

也許這種方法將是一個很好的除了UI排序選項？

Answer 1

我設法通過修改抖動做到這一點編碼一下，然後附加到「更改」事件而不是「停止」。我通過查看拖動項目時索引如何變化並設置一些條件來做到了這一點。它也適用於多個固定元素。 「lockto」變量定義了固定元素的位置，固定元素最初應該在這個位置。你可能可以重寫這個並將其包裝在一個函數中，所以你不需要爲所有固定元素手動設置「lockto」變量。

$("#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

我猜這不是微不足道的。爲了您的例子，它仍然有一些工作是可行的（一個通用的解決方案將是一個有點困難）

檢查http://jsbin.com/etubi/2用於演示（http://jsbin.com/etubi/2/edit的代碼）

$("#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

希望我在發佈我的文章之前看過這個問題，並且做了所有可分類的研究。這可能是一個很好的起點。無論如何，這裏是JQuery Sortable set item to an index programmatically這個問題的通用解決方案。

Answer 4

您可以使用排序選項 「取消」

例：

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

這樣一來，有 「group_elem」 類li元素，不會排序。