Position triable de l'interface utilisateur jQuery

Comment suivre la position d'un élément lorsque sa position dans une liste triable change?

Vous pouvez utiliser l' uiobjet fourni aux événements, en particulier vous voulez l' stopévénement , la ui.itempropriété et .index(), comme ceci:

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

Vous pouvez voir une démo fonctionnelle ici , rappelez-vous que la .index()valeur est basée sur zéro, vous pouvez donc vouloir +1 à des fins d'affichage.

Je ne savais pas trop où je stockerais la position de départ, alors je veux développer le commentaire de David Boikes. J'ai trouvé que je pouvais stocker cette variable dans l'objet ui.item lui-même et la récupérer dans la fonction d'arrêt comme suit:

$( "#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());
    }
});

Utilisez la mise à jour au lieu d' arrêter

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

mise à jour (événement, interface utilisateur)

Type: sortupdate

Cet événement est déclenché lorsque l'utilisateur a arrêté le tri et que la position DOM a changé.

.

stop (événement, ui)

Type: arrêt de tri

Cet événement est déclenché lorsque le tri est arrêté. Type d'événement: Événement

Morceau de code:

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>

Selon la documentation officielle de l'interface utilisateur jquery triable: http://api.jqueryui.com/sortable/#method-toArray

Dans l'événement de mise à jour. utilisation:

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

et si vous alertez ou consolez cette var (sortedIDs). Vous aurez votre séquence. Veuillez choisir comme «bonne réponse» si c'est la bonne.