jQuery UI 可排序：确定项目的顺序

Posted 2023-02-24

【中文标题】jQuery UI 可排序：确定项目的顺序

【英文标题】：jQuery UI sortable: determining in what order the items are

【发布时间】：2011-02-09 18:42:51

【问题描述】：

Here 是 javascript 的一个有趣用途：通过拖放重新排序项目。我页面中的实现本身运行良好，但是有没有办法确定用户放置项目的顺序？

我之所以这么问，是因为我想在 cookie 中加载和保存商品订单。

【参考方案1】：

2012 年更新

FULL WORKING DEMO & SOURCE

---

获取元素的索引位置尝试读取这个：

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

jquery 的 COOKIE 插件：

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：

这只是一个示例，但您明白了：您可能希望使用数据库并使用 AJAX 来取回 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> 
';

?>

【讨论】：

您提出了一个有趣的 Stack Overflow 线程。我认为 serialize 方法可能会让我到达我需要去的地方，但我无法将这些部分组合在一起。

太棒了！这留下了最后一个问题：当我重新加载页面时，如何让 li 以正确的顺序出现？我可以用 PHP 检索这个 cookie 吗？

另外，我从 Google Chrome 收到一条奇怪的错误消息。它在 Internet Explorer 中运行良好。 （路径在这里...）/jquery.cookie.js:80 未捕获的错误：SECURITY_ERR: DOM Exception 18

【参考方案2】：

使用toArray 方法将可排序的项目ID 序列化为字符串数组。

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

【讨论】：

按排序顺序返回一个 id 属性数组。

简单有效，我喜欢的方式。这应该是公认的答案。

$( "#sortable" ).sortable("toArray", attribute: "data-some-attribute") 如果你不想使用 id。

【参考方案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 看起来像 (new-item-order:item-id)

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

然后您可以将其解析为类似的更新函数

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

然后

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

【参考方案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

【参考方案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();
);