drop - sortable jquery ejemplos

jQuery sortable get.index() antes y después de la clasificación?

Question

Estoy utilizando el ordenable de jQuery en un complemento de etiquetado. El complemento mantiene una serie de objetos que se relacionan con los de li en el mismo orden que los elementos reales.

Necesito actualizar el orden de los elementos en la matriz cuando finalice la clasificación.

Pensé que solo podría en el evento de inicio llamar a $(ui).index() y en el evento de actualización llamar al mismo que me daría la posición inicial y la posición final, pero ambas llamadas devuelven -1 .

¿Cómo debería hacer esto?

Estructura:

<ul>
<li>here<a class="close">x</a></li>
<li>are<a class="close">x</a></li>
<li>some<a class="close">x</a></li>
<li>tags<a class="close">x</a></li>
</ul>

Estructura de la matriz:

[{
    label: ''here'',
    value: 36,
    element: ''$(the li that this info is about)'',
    index: 0
},
{
    label: ''are'',
    value: 42,
    element: ''$(the li that this info is about)'',
    index: 1
},
{
    label: ''some'',
    value: 21,
    element: ''$(the li that this info is about)'',
    index: 2
},
{
    label: ''tags'',
    value: 26,
    element: ''$(the li that this info is about)'',
    index: 3
}]

JavaScript:

$(''ul'').sortable({
    start: function(event, ui){...},
    update: function(event, ui){...}
});

Answer 1

puede asociar algunos datos con cada elemento de la lista para hacer un seguimiento de ellos de esta manera:

<ul id="sortable">
<li data-id="1" class="ui-state-default">1</li>
<li data-id="2" class="ui-state-default">2</li>
<li data-id="3" class="ui-state-default">3</li>
</ul>

A continuación, puede acceder a estos datos a través de jQuery de esta manera:

$(''ul li:nth-child(0)'').data(''id'');
$(''ul li:nth-child(1)'').data(''id'');
$(''ul li:nth-child(2)'').data(''id'');

Answer 2

si .index() está devolviendo -1, eso sugeriría que está haciendo esa solicitud antes de que el elemento esté disponible para el DOM. o ha etiquetado incorrectamente un selector y, de nuevo, no existe en el momento de la llamada o está vacío en relación con la función .index ()

Answer 3

$(function() { $( "#sortable" ).sortable({ update: function(event, ui) { console.log(''update: ''+ui.item.index()) }, start: function(event, ui) { console.log(''start: '' + ui.item.index()) } }); $( "#sortable" ).disableSelection(); });