Bir öğenin jQuery UI'de yerinde kalmasını zorluyor Sorgulanan liste

Question

Bir jQuery sıra listeyi oluşturdum ancak bazı öğeleri sıraya alınmış 'sabit' yerinde tutmam ve diğer öğelerin sıralamasını yapmam gerekiyor. çevrelerinde. Bunu başarmak için yöntemlerin inşa edileceğini düşündüm, bu durum böyle değil.

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

Bu bu öğeleri bırakarak/sürükle beni durdurur ancak çevrelerindeki ürün sıralanır eğer hala hareket:

Ben listesini hazırlayıp değil söz konusu öğeleri dahil edebiliyorum. Bu yöntemin sahip olduğu birçok geri çağırma yöntemini kullanarak bunu yapmanın bir yolu olabilir, ancak bunu gerçekleştiremedim.

Belki bu yöntem UI Sortable seçeneklerine iyi bir ek olabilir?

Answer 1

(kod için http://jsbin.com/etubi/2/edit) bir demo için

Kontrol http://jsbin.com/etubi/2 (jenerik çözüm biraz daha zor olurdu) hala biraz çalışma ile mümkün olduğunu biraz kodlayın ve "dur" yerine "değişiklik" etkinliğine ekleyin. Bir maddeyi sürüklerken indeksin nasıl değiştiğine bakıp bazı şartlı durumlar belirledim. Aynı zamanda çoklu sabit elemanlarla çalışır. "Lockto" değişkeni sabit elemanın pozisyonunu tanımlar ve sabit eleman başlangıçta bu pozisyonda olmalıdır. Bunu muhtemelen yeniden yazabilir ve bir fonksiyona sarabilirsiniz, böylece tüm sabit elemanlar için "lockto" değişkenini manuel olarak ayarlamanız gerekmez.

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

Bu tahmin önemsiz değil. senin Mesela o ben gerginlik değiştirerek bunu başardı

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

Bu soruyu benim yayınlamadan önce ve tüm bu Sortable araştırmalarını yapmadan önce görmüştüm. Bu iyi bir başlangıç ​​noktası olabilirdi. Her neyse, işte bu soruna genel bir çözüm olan JQuery Sortable set item to an index programmatically.

Answer 4

Sen

Ex "iptal" sıralanabilir seçeneği kullanabilirsiniz:

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

Bu şekilde, "group_elem" sınıf var li elemanları, sıralanabilir olmayacaktır.