Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

163
Visualizações
SortableJS lists and fixed/locked items

I need to create an orderable drag and drop list where one or more positions can be fixed as well as the link model:

http://jsfiddle.net/euo4tfcz/

var locktos = [];
$(document).ready(function() {
    $("#sortable li.static").each(function () {
      locktos.push($(this).index());
        $(this).attr("id", "static-" + $(this).index());
    }); 
    alert($("#sortable li").eq(locktos[1]).attr("id"));
});
$("#sortable").sortable({
    "cancel":"li.static",
    "change":function(event,ui) {
       // var locktos = [1, 5];
       for(i=0;i<locktos.length;i++) {
           console.log(locktos[i]);
            var thisindex = $(ui.helper).index();         
            var fixed = $("#static-"+locktos[i]);           
            var index = fixed.index();
            var targetindex = locktos[i]+1;
           console.log(index + ", targetindex: " + targetindex);
            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
            }  
           
    }
    }
});
ul > li {display:block;height:15px;width:100px;background:#ccc;margin:2px;padding:3px;border:1px solid #aaa;}
<ul id="sortable">
    
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>

But I need to do this with the SortableJS plugin from this link below http://sortablejs.github.io/Sortable/

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda