jQuery UI: sortable(''toArray'') devuelve una matriz vacía

jquery-ui jquery-ui-sortable

Question

Esto me ha dejado 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

Para usar otro atributo puedes hacer esto:

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

Esto lo hará así que ahora usa el atributo "valor" de su código.

Documentación sobre el método Sortable toArray

Answer 2

Puede definir qué atributo obtener de esta manera:

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

Answer 3

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

jq referencia ordenable

Answer 4

También estaba teniendo este problema, excepto que tenía ID''s en mis elementos, jQuery sortable (''toArray'') fue muy impreciso al devolver los ID, sin embargo, puedes capturarlos en javascript usando esto:

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

Por supuesto, esto 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 la solución que encontré.

Answer 5

Veo algunas respuestas puramente javascript. Funcionan, pero tenga cuidado, es posible que no devuelvan los elementos 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 ordenado apropiado. Esto me dejó perplejo por un tiempo porque quería guardar el nuevo pedido en una base de datos, para poder volver a cargar la cuadrícula donde alguien la dejó.

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

Answer 6

.sortable(''toArray'') serializa los Ids elementos en una matriz, y sus elementos no tienen Id. Es por eso que tiene cadenas vacías.

Answer 7

$ (''. sortable''). sortable (''toArray''); solo analizará el primer elemento de la clase clasificable . Puedes analizar todos los elementos usando cada uno :

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