Mantenga un registro de las posiciones de todos los elementos en un ordenable jQuery

Question

Estoy tratando de averiguar cómo puedo rastrear cómo se pueden ordenar los elementos en un jQuery. Digamos que tengo cuatro elementos (divs) en mi clasificación, cada uno tiene una identificación única. Llamémoslos # 100, # 200, # 300 y # 400 y se presentan en ese orden para comenzar. Pero cuando mueva # 100 para decir el número de spot 3, necesito poder guardar la nueva posición para esta identificación, pero también me aseguro de que los otros también tengan valores de posición actualizados.

¿Tengo algún sentido? Básicamente quiero obtener las posiciones de cada identificación única, por lo que puedo guardar el orden de la lista para su uso posterior.

no he sido capaz de encontrar algo que se informa de todos los elementos de una ordenable, sólo para el que se ha movido ..

me punto en la dirección correcta? Gracias

Answer 1

Puede usar el evento stop que se le proporciona en orden para realizar un seguimiento de los elementos. Este es un pequeño ejemplo;

(function($) { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
      console.log($.map($(this).find('li'), function(el) { 
       return el.id + ' = ' + $(el).index(); 
      })); 
     } 
    }); 
})(jQuery); 

Esto registra una matriz de todos los elementos en el ordenable con sus identificadores y sus índices actuales.

Aquí es un ejemplo de trabajo en jsFiddle así: http://jsfiddle.net/beyondsanity/HgDZ9/

Answer 2

Posible duplicado de jQuery UI Sortable Position.

Básicamente, para obtener la posición de un elemento dentro de un ordenable (o simplemente un elemen padres a secas), simplemente algo así como

$('#300').index(); 

Este código volverá 2 si nada se ha movido (index() empieza a contar en cero) y actualizaciones cuando los elementos se vuelven a organizar.

Aquí hay una demostración: http://jsfiddle.net/XB5Dh/. Puede hacer clic en un elemento para ver su posición, y la nueva posición se muestra cuando arrastra un elemento.

Answer 3

De acuerdo con los documentos http://api.jqueryui.com/sortable/#method-toArray sugiero que utilice método integrado toArray. Ejemplo:

$(document).ready(function() { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
     console.log($('#sortable').sortable('toArray')); 
     } 
    }); 
    $('#sortable').disableSelection(); 
    });