jQuery UI sortable: determinar en qué orden los artículos son

Question

Here es un uso interesante de JavaScript: reordenar elementos con arrastrar y soltar. La implementación en mi página funciona bien, pero ¿hay alguna manera de determinar en qué orden el usuario puso los artículos?

Pregunto porque quiero cargar y guardar el pedido del artículo en una cookie.

Answer 1

ACTUALIZADO 2012

FULL WORKING DEMO & SOURCE

---

obtener la posición de índice de los elementos a tratar de leer esto:

• Getting the position of the element in a list when it's drag/dropped (ui.sortable)

plug-in de la galleta por jQuery:

• http://plugins.jquery.com/project/cookie

JQUERY:

$(function() { 
    //coockie name 
    var LI_POSITION = 'li_position'; 
     $('ul#sortable').sortable({ 
     //observe the update event... 
      update: function(event, ui) { 
       //create the array that hold the positions... 
       var order = []; 
       //loop trought each li... 
       $('#sortable li').each(function(e) { 

       //add each li position to the array...  
       // the +1 is for make it start from 1 instead of 0 
       order.push($(this).attr('id') + '=' + ($(this).index() + 1)); 
       }); 
       // join the array as single variable... 
       var positions = order.join(';') 
       //use the variable as you need! 
       alert(positions); 
      // $.cookie(LI_POSITION , positions , { expires: 10 }); 
      } 
     }); 
    });​ 

HTML:

<ul id="sortable"> 
    <li id="id_1"> Item 1 </li> 
    <li id="id_2"> Item 2 </li> 
    <li id="id_3"> Item 3 </li> 
    <li id="id_4"> Item 4 </li> 
    <li id="id_5"> Item 5 </li> 
</ul> 

PHP:

esto es sólo un ejemplo, pero que tuvo la idea: es posible que desee utilizar una base de datos en su lugar y use AJAX para recuperar la lis:

<?php 
//check if cookie is set.. 
if (isset($_COOKIE['li_position'])) { 
//explode the cockie by ";"... 
$lis = explode(';' , $_COOKIE['li_position']); 
// loop for each "id_#=#" ... 
foreach ($lis as $key => $val) { 
//explode each value found by "="... 
$pos = explode('=' , $val); 
//format the result into li... 
$li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>'; 
} 
//display it 
echo $li; 
// use this for delete the cookie! 
// setcookie('li_position' , null); 
} else { 
// no cookie available display default set of lis 
echo ' 
    <li id="id_1"> Fuji </li> 
    <li id="id_2"> Golden </li> 
    <li id="id_3"> Gala </li> 
    <li id="id_4"> William </li> 
    <li id="id_5"> Jordan </li> 
'; 
} 
?> 

Answer 2

Utilice el método toArray que serializa los identificadores de elemento de la ordenación en una matriz de cadena.

$("#sortable").sortable('toArray'); 

Answer 3

HTML

<ul id="sortable"> 
    <li id="id1"> Item 1 </li> 
    <li id="id2"> Item 2 </li> 
    <li id="id3"> Item 3 </li> 
    <li id="id4"> Item 4 </li> 
    <li id="id5"> Item 5 </li> 
</ul> 

JQUERY

$("#sortable").sortable(
      { 
       update: function() { 
       var strItems = ""; 

       $("#sortable").children().each(function (i) { 
        var li = $(this); 
        strItems += li.attr("id") + ':' + i + ','; 
       }); 

       updateSortOrderJS(strItems); <--- do something with this data 

       } 
      }); 

strItems parecerán (nuevo elemento de orden: punto-id)

0,49:1,365:2,50:3,364:4,366:5,39:6

entonces yo u puede analizarlo en un funciones de actualización algo así como

List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));

continuación

String[] item = i.Split(new Char[] { ':' });

Answer 4

Esto es lo que yo uso actualmente:

<div id="sortable"> 
    <div id="2000"></div> 
    <div id="1000"></div> 
    <div id="3000"></div> 
</div> 

$('#sortable').sortable({ 
    update: function() { save_new_order() } 
}); 

function save_new_order() { 
    var a = []; 
    $('#sortable').children().each(function (i) { 
     a.push($(this).attr('id') + ':' + i); 
    }); 
    var s = a.join(','); 
    alert(s); 
} 

valor Alertado:

2000:0,1000:1,3000:2 

Answer 5

He usado el siguiente código para obtener el orden del artículo.

Html

 <div id="sortable"> 
     <div >1</div> 
     <div >2</div> 
     <div >3</div> 
     <div >4</div> 
     <div >5</div> 
     <div >6</div> 
     </div> 

JQuery

 $(document).ready(function(){ 
     $("#sortable").sortable({ 
      stop : function(event, ui){ 
     $('#sortable > div').each(function(){ 
      alert($(this).html()); 
     });   
     } 
    }); 
    $("#sortable").disableSelection(); 
});