jQuery UI: ordenable ('toArray') devuelve un array vacío

Question

Esto me tiene perplejo. El siguiente código devuelve ",,,,,,":

<script type="text/javascript"> 
$(function() { 
    $('#listB').sortable({ 
     connectWith: '#listA', 
     update: function(event, ui) { 
      var result = $(this).sortable('toArray'); 
      alert(result); 
      } 
    }); 
    $('#listA').sortable({ 
     connectWith: '#listB' 
    }); 
}); 
</script> 

<div id="boxA"> 
    <ul id="listA" class="myList"> 
     <li value="1">Item A</li> 
     <li value="2">Item B</li> 
     <li value="3">Item C</li> 
     <li value="4">Item D</li> 
     <li value="5">Item E</li> 
     <li value="6">Item F</li> 
     <li value="7">Item G</li> 
    </ul> 
</div> 

<div id="boxB"> 
    <ul id="listB" class="myList"> 
     <li value="1">Item A</li> 
     <li value="2">Item B</li> 
     <li value="3">Item C</li> 
     <li value="4">Item D</li> 
     <li value="5">Item E</li> 
     <li value="6">Item F</li> 
     <li value="7">Item G</li> 
    </ul> 
</div> 

¿Por qué ?! ¡Me está volviendo loca! ¿Alguna sugerencia?

Answer 1

.sortable('toArray') serializa los artículos Ids en una matriz, y sus artículos no tienen Id., Por eso tiene cadenas vacías.

Answer 2

que estaba teniendo este problema, así excepto que tenía de identificación en mis elementos, se puede ordenar de jQuery ('toArray') muy golpearon una señorita en la declaración de los identificadores, sin embargo se puede agarrar en JavaScript utilizando la siguiente:

function getSortOrder() { 
    var children = document.getElementById('sortedElement').childNodes; 
    var sort = ""; 
    for (x in children) { 
     sort = sort + children[x].id + ","; 
    } 
    return sort; 
} 

Esto, por supuesto, devuelve los ID en una cadena delimitada por comas, pero puede devolver la matriz. Estoy seguro de que hay una mejor manera de resolver este problema, esta es solo la solución que encontré.

Answer 3

Puede definir qué atributo a buscar la siguiente manera:

var result = $(this).sortable('toArray', {attribute: 'value'}); 

Answer 4

Si serializar devuelve una cadena vacía, asegúrese de que los atributos id incluyen un guión bajo. Deben estar en la forma: "set_number" Por ejemplo, una lista de 3 elementos con los atributos id "foo_1", "foo_5", "foo_2" se serializará a "foo [] = 1 & foo [] = 5 & foo [] = 2 ". Puede usar un guión bajo, signo igual o guión para separar el conjunto y el número. Por ejemplo, "foo = 1", "foo-1" y "foo_1" se serializan en "foo [] = 1".

jq sortable reference

Answer 5

$ ('puede ordenar. ') Ordenable (' toArray.'); solo analizará el primer elemento de la clase ordenable. Puede analizar todos los elementos mediante el uso de cada:

$('.sortable').each(function(){ 
    result.push($(this).sortable('toArray')); 
}) 

Answer 6

Para utilizar otro atributo que puede hacer esto:

$('#element').sortable('toArray' {attribute: 'value'}) 

Esto hará que sea por lo que ahora utiliza el 'valor' atributo de tu codigo.

Documentation on Sortable toArray method

Answer 7

veo algunas respuestas puramente javascript. Funcionan, pero cuidado, es posible que no devuelvan los artículos en el orden que se ve en la pantalla. Usando el código a continuación, vea jtsalva arriba, devolverá los artículos en el orden correcto. Esto me dejó perplejo por un tiempo porque quería guardar el nuevo pedido en una base de datos, para que pudiera volver a cargar la grilla donde alguien la dejó.

var result = $(this).sortable('toArray', {attribute: 'value'});