Position triable de l'interface utilisateur jQuery

Réponses:

296

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.

Nick Craver
la source
60
De plus, si vous souhaitez suivre la provenance de l'élément déplacé (passer de la position 0 à la position 2), vous devez accéder à la valeur ui.item.index () dans l'événement de démarrage et stocker cette valeur.
David Boike
Existe-t-il un moyen de trouver un div-id de portlets triables dans #sortable div?
Frank
De plus, si vous avez besoin de suivre la position pendant le glissement avec sort, vous pouvez utiliser ui.placeholder.index. L'index commence à la position 1.
Loïc Pennamen
127

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());
    }
});
i_a
la source
5
Vous sauvez ma journée! Monsieur la question, comment puis-je enregistrer la nouvelle position en utilisant ajax?
mrrsb
5
Pourquoi n'ont-ils pas un exemple simple comme celui-ci sur les pages de manuel triables? Je n'avais vraiment pas réalisé que les éléments startétaient capables d'être dans le stopchamp d'application jusqu'à ce que je voie cela.
Sablefoste
1
Je ne comprends pas pourquoi une fonctionnalité aussi commune ne fait pas partie de triable ...
burzum
14

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>
user3439968
la source
4

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.

rahim.nagori
la source