jQuery UI sortable: déterminer dans quel ordre les éléments sont

Question

Here est une utilisation intéressante de JavaScript: réorganisation des éléments avec glisser-déposer. L'implémentation elle-même dans ma page fonctionne bien, mais est-il possible de déterminer dans quel ordre l'utilisateur a placé les éléments?

Je demande parce que je veux charger et enregistrer l'ordre d'article dans un biscuit.

Answer 1

MISE À JOUR 2012

FULL WORKING DEMO & SOURCE

---

obtenir la position d'index des éléments essayez de lire ceci:

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

plugin COOKIE pour 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:

c'est juste un exemple, mais vous a eu l'idée: vous pouvez utiliser un base de données à la place et utiliser AJAX pour récupérer 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

Utilisez la méthode toArray qui sérialise les ID de l'élément triable dans un tableau de chaînes.

$("#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 ressembleront (nouveau point d'ordre: article-id)

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

puis yo u peut analyser dans une mise à jour des fonctions quelque chose comme

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

puis

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

Answer 4

Voici ce que j'utilise actuellement:

<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); 
} 

valeur Avertie:

2000:0,1000:1,3000:2 

Answer 5

J'ai utilisé le code suivant pour obtenir l'ordre de l'article.

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