jQuery UI可排序：確定項目的順序

Question

Here是JavaScript的一個有趣用法：使用拖放對項目進行重新排序。我的頁面中的實現本身工作正常，但有沒有辦法確定用戶放置項目的順序？

我在問，因爲我想加載並將項目順序保存在cookie中。

Answer 1

更新2012年

FULL WORKING DEMO & SOURCE

---

獲得元素的索引位置嘗試讀取這個：

：

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

的jQuery插件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：

這只是一個例子，但你有這個想法：你可能想使用數據庫，並使用AJAX獲取回覆：

<?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

使用toArray方法將可排序的項目標識符序列化爲一個字符串數組。

$("#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的樣子（新項目訂單：項目-ID）

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

然後喲ü可以解析成一個更新的功能類似

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

然後

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

Answer 4

這是我目前使用：

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

驚動值：

2000:0,1000:1,3000:2 

Answer 5

我已經使用下面的代碼來獲取項目的順序。

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