Posición ordenable de jQuery UI

Respuestas:

296

Puede usar el uiobjeto proporcionado a los eventos, específicamente desea el stopevento , la ui.itempropiedad y .index(), de esta manera:

$("#sortable").sortable({
    stop: function(event, ui) {
        alert("New position: " + ui.item.index());
    }
});

Puede ver una demostración en funcionamiento aquí , recuerde que el .index()valor está basado en cero, por lo que es posible que desee hacer +1 para mostrar.

Nick Craver
fuente
6060
Como nota adicional, si desea rastrear de dónde vino el elemento movido (moverse de la posición 0 a la posición 2), entonces necesita acceder al valor ui.item.index () en el evento de inicio y almacenar ese valor.
David Boike
¿Hay alguna manera de encontrar portlets ordenables div-id dentro de #sortable div?
Frank
Además, si necesita rastrear la posición durante el arrastre con sort, puede usar ui.placeholder.index. El índice comienza en la posición 1.
Loïc Pennamen
127

No estaba muy seguro de dónde almacenaría la posición de inicio, así que quiero dar más detalles sobre el comentario de David Boikes. Descubrí que podía almacenar esa variable en el objeto ui.item y recuperarla en la función de detención de la siguiente manera:

$( "#sortable" ).sortable({
    start: function(event, ui) {
        ui.item.startPos = ui.item.index();
    },
    stop: function(event, ui) {
        console.log("Start position: " + ui.item.startPos);
        console.log("New position: " + ui.item.index());
    }
});
I a
fuente
55
¡Me salvas el día! Señor pregunta, ¿cómo puedo guardar la nueva posición usando ajax?
mrrsb
55
¿Por qué no tienen un ejemplo simple como este en las páginas man ordenables? Realmente no me di cuenta de que los artículos starteran capaces de estar dentro del stopalcance hasta que vi esto.
Sablefoste
1
No entiendo por qué una funcionalidad tan común no es parte de sortable ...
Burzum
14

Usar actualización en lugar de detener

http://api.jqueryui.com/sortable/

actualización (evento, ui)

Tipo: sortupdate

Este evento se activa cuando el usuario dejó de ordenar y la posición del DOM ha cambiado.

.

detener (evento, ui)

Tipo: sortstop

Este evento se desencadena cuando se detiene la clasificación. Tipo de evento: Evento

Pieza de código:

http://jsfiddle.net/7a1836ce/

<script type="text/javascript">

var sortable    = new Object();
sortable.s1     = new Array(1, 2, 3, 4, 5);
sortable.s2     = new Array(1, 2, 3, 4, 5);
sortable.s3     = new Array(1, 2, 3, 4, 5);
sortable.s4     = new Array(1, 2, 3, 4, 5);
sortable.s5     = new Array(1, 2, 3, 4, 5);

sortingExample();

function sortingExample()
{
    // Init vars

    var tDiv    = $('<div></div>');
    var tSel    = '';

    // ul
    for (var tName in sortable)
    {

        // Creating ul list
        tDiv.append(createUl(sortable[tName], tName));
        // Add selector id
        tSel += '#' + tName + ',';

    }

    $('body').append('<div id="divArrayInfo"></div>');
    $('body').append(tDiv);

    // ul sortable params

    $(tSel).sortable({connectWith:tSel,
       start: function(event, ui) 
       {
            ui.item.startPos = ui.item.index();
       },
        update: function(event, ui)
        {
            var a   = ui.item.startPos;
            var b   = ui.item.index();
            var id = this.id;

            // If element moved to another Ul then 'update' will be called twice
            // 1st from sender list
            // 2nd from receiver list
            // Skip call from sender. Just check is element removed or not

            if($('#' + id + ' li').length < sortable[id].length)
            {
                return;
            }

            if(ui.sender === null)
            {
                sortArray(a, b, this.id, this.id);
            }
            else
            {
                sortArray(a, b, $(ui.sender).attr('id'), this.id);
            }

            printArrayInfo();

        }
    }).disableSelection();;

// Add styles

    $('<style>')
    .attr('type', 'text/css')
    .html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')
    .appendTo('head');


    printArrayInfo();

}

function printArrayInfo()
{

    var tStr = '';

    for ( tName in sortable)
    {

        tStr += tName + ': ';

        for(var i=0; i < sortable[tName].length; i++)
        {

            // console.log(sortable[tName][i]);
            tStr += sortable[tName][i] + ', ';

        }

        tStr += '<br>';

    }

    $('#divArrayInfo').html(tStr);

}


function createUl(tArray, tId)
{

    var tUl = $('<ul>', {id:tId, class:'sortableClass'})

    for(var i=0; i < tArray.length; i++)
    {

        // Create Li element
        var tLi = $('<li>' + tArray[i] + '</li>');
        tUl.append(tLi);

    }

    return tUl;
}

function sortArray(a, b, idA, idB)
{
    var c;

    c = sortable[idA].splice(a, 1);
    sortable[idB].splice(b, 0, c);      

}
</script>
usuario3439968
fuente
4

Según la documentación oficial de la interfaz de usuario ordenable de jquery: http://api.jqueryui.com/sortable/#method-toArray

En caso de actualización. utilizar:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

y si alerta o consuela esta var (sortedIDs). Obtendrás tu secuencia. Elija como "Respuesta correcta" si es la correcta.

rahim.nagori
fuente