Posizione ordinabile dell'interfaccia utente jQuery


Risposte:


296

È possibile utilizzare l' uioggetto fornito agli eventi, in particolare si desidera l' stopevento , la ui.itemproprietà e .index(), in questo modo:

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

Puoi vedere una demo funzionante qui , ricorda che il .index()valore è basato su zero, quindi potresti voler fare +1 per scopi di visualizzazione.


60
Come nota aggiuntiva, se si desidera tenere traccia della provenienza dell'elemento spostato (passare dalla posizione 0 alla posizione 2), è necessario accedere al valore ui.item.index () nell'evento di inizio e memorizzare tale valore.
David Boike,

Esiste un modo per trovare div-id portlet ordinabili in # div ordinabile?
Frank,

Inoltre, se è necessario tenere traccia della posizione durante il trascinamento con sort, è possibile utilizzare ui.placeholder.index. L'indice inizia in posizione 1.
Loïc Pennamen

127

Non ero sicuro di dove avrei memorizzato la posizione iniziale, quindi voglio approfondire il commento di David Boikes. Ho scoperto che avrei potuto memorizzare quella variabile nell'oggetto ui.item stesso e recuperarla nella funzione di arresto in questo modo:

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

5
Mi salvi la giornata! Amico domanda, come posso salvare la nuova posizione usando Ajax?
sig.

5
Perché non hanno un semplice esempio come questo nelle pagine man ordinabili? Davvero non mi rendevo conto che gli oggetti da starterano in grado di essere stopnell'ambito fino a quando non ho visto questo.
Sablefoste,

1
Non capisco perché una funzionalità così comune non
faccia

14

Utilizzare aggiorna invece di interrompere

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

aggiornamento (evento, interfaccia utente)

Digitare: sortupdate

Questo evento viene attivato quando l'utente smette di ordinare e la posizione DOM è cambiata.

.

stop (evento, ui)

Tipo: sortstop

Questo evento viene attivato quando l'ordinamento si è interrotto. Tipo di evento: Evento

Pezzo di codice:

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>

4

Secondo la documentazione ufficiale dell'interfaccia utente ordinabile di jquery: http://api.jqueryui.com/sortable/#method-toArray

In caso di aggiornamento. uso:

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

e se avverti o consoli questo var (ordinati ID). Avrai la tua sequenza. Scegli come "Risposta giusta" se è una risposta corretta.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.