web-dev-qa-db-fra.com

jQuery UI Sortable Position

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

jqueryjquery-uijquery-ui-sortable
143
Jiew Meng

Vous pouvez utiliser l’objet ui fourni aux événements. Plus précisément, vous souhaitez que l’événement stop , ui.item Propriété et .index() , comme cette:

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

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

289
Nick Craver

Je ne savais pas trop où je mettrais la position de départ, alors je voudrais 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 stop de la manière suivante:

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

Utilisez update au lieu de stop

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

update (événement, interface utilisateur)

Type: sortupdate

Cet événement est déclenché lorsque l'utilisateur arrête de trier et que la position du DOM est modifiée.

.

stop (événement, ui)

Type: arret 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>
14
user3439968

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

En événement de mise à jour. utilisation:

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

et si vous alertez ou consolez cette var (IDs triés). Vous aurez votre séquence. Veuillez choisir la "bonne réponse" si c'est la bonne.

4
rahim.nagori