Listas ordenables de JQuery y elementos fijos / bloqueados

Solución:

Aquí hay una versión con suerte sin errores, que se actualiza a medida que arrastra. Está generando las posiciones deseadas actuales de los elementos cuando comienza la clasificación, lo que significa que debería poder cambiar las clases cuando lo necesite, actualizar los elementos de la lista del widget y listo.

También utiliza la función de ordenación incorporada. items propiedad para evitar arrastrar los elementos fijos y para solucionar cualquier problema de clasificación en la parte superior e inferior de la lista.

Traté de mover los elementos arreglados, pero eso resultó en un comportamiento horriblemente defectuoso, especialmente cuando hay varios elementos arreglados en grupos. La solución final separa todos los elementos fijos de la lista, agrega un elemento auxiliar al frente y luego vuelve a insertar los elementos fijos en la posición deseada, lo que parece corregir todos los errores.

Pruebe la demostración aquí: http://jsfiddle.net/PQrqS/1/

HTML:

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

CSS:

.static { color:red; }

li { background-color:whitesmoke; border:1px solid silver; width:100px; padding:2px; margin:2px; }

Javascript:

$('#sortable').sortable({
    items: ':not(.static)',
    start: function(){
        $('.static', this).each(function(){
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    change: function(){
        $sortable = $(this);
        $statics = $('.static', this).detach();
        $helper = $('<li></li>').prependTo(this);
        $statics.each(function(){
            var $this = $(this);
            var target = $this.data('pos');

            $this.insertAfter($('li', $sortable).eq(target));
        });
        $helper.remove();
    }
});

Extendí el jQuery.Ui.sortable:

Visión general

jQuery.Ui.sortable extensión de widget con fixed característica. Esta característica permite al usuario arreglar elementos en la lista.
Con el .fixedsortable() constructor construyes un .sortable() clase que se extendió con las características. Puedes usar el original métodos y el extendido así como.

Código

https://gist.github.com/3758329#file_fixedsortable.js> fixedsortable.js

Ejemplo

http://jsfiddle.net/omnosis/jQkdb/

Uso

General:

Para usar, agregue el fixed propiedad a las opciones de lista ordenables:

$("#list").fixedsortable({
   fixed: (value)
})

el valor puede ser:

• entero ejemplo: 3
• formación de enteros ejemplo: [1,2,5]
• a elemento html o una lista de elementos html
• a selector de CSS
• jquery objeto

HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //the jquery 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> //the original jquery-ui   
<script type="text/javascript" src="https://raw.github.com/gist/3758329/91749ff63cbc5056264389588a8ab64238484d74/fixedsortable.js"></script> //the extended sortable
...
<ul id="sortable1">
    <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>

<ul id="sortable2">
    <li>bananas</li>
    <li foo="asd">oranges</li>
    <li foo="dsa">apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

<ul id="sortable3">
    <li>bananas</li>
    <li>oranges</li>
    <li>apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

Javascript

$(function() {
    $("#sortable1").fixedsortable({
        fixed: "> .static"
    });

    $("#sortable2").fixedsortable({
        fixed: $("li[foo]").css("background","red")
    });

    $("#sortable3").fixedsortable({
        fixed: 2
    })
});

Notas:

Si insiste en usar el .sortable en lugar de .fixedsortable puede usar este https://gist.github.com/3758329#file_sortable.js en lugar de la biblioteca jquery.ui. Este es un reemplazo completo del jQuery.ui, pero no recomiendo usar esto debido a actualizaciones posteriores.

He estado trabajando en esto más de 12 horas 🙁 estoy loco ..

Mira esto: Forzar un elemento a permanecer en su lugar en una lista ordenable de jQuery UI

Además, he implementado la solución anterior con múltiples elementos fijos aquí: http://jsfiddle.net/enBnH/12/ (obsoleto, ver más abajo) Creo que se explica por sí mismo.

EDITAR:

Automaticé el proceso para generar los valores de bloqueo, así como agregar ID a esos lis con la clase “fija” (tenga en cuenta que tengo que agregar una ID para que podamos hacer referencia a ella)

Vea la solución COMPLETA AQUÍ: http://jsfiddle.net/enBnH/44/

EDITAR

De acuerdo, después de un trillón de errores con lo anterior, acabo de reescribir la maldita cosa yo mismo: http://jsfiddle.net/thomas4g/GPMZZ/15/

NOTA: Lo anterior funciona, pero la respuesta de @ DarthJDG me parece mucho mejor. Dejo el mío por si acaso alguien podría preferir cómo se comporta el mío (he aprendido a no borrar cosas solo porque hay una versión mejor: P)

---

---

Utiliza Nuestro Buscador