jQuery UI Posición ordenable

Question

¿Cómo realizo un seguimiento de qué posición es un elemento cuando cambia su posición en una lista ordenable?

Answer 1

Usted puede utilizar el objeto ui proporcionado a los eventos, específicamente desea que el stop event, la ui.item property y .index(), así:

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

You can see a working demo here, recordar el valor .index() está basado en cero, por lo que puede desea +1 para fines de visualización.

Answer 2

No estaba seguro de dónde iba a guardar la posición de inicio, por lo que quiero profundizar en el comentario de David Boikes. Me di cuenta que podía almacenar esa variable en el propio objeto ui.item y recuperarlo en la función de parada de modo que:

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

Answer 3

Uso actualización lugar de parada

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

actualización (event, ui)

Tipo: sortupdate

Este evento se desencadena cuando el usuario ha dejado de ordenar y la posición DOM ha cambiado.

.

parada (evento, ui)

Tipo: sortstop

Este evento se lanza al ordenar se ha detenido. 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>