web-dev-qa-db-ja.com

jQuery UIソート可能：アイテムの順序を決定する

ここ はJavaScriptの興味深い使用法です。ドラッグアンドドロップでアイテムを並べ替えます。ページの実装自体は問題なく機能しますが、ユーザーがアイテムを配置する順序を決定する方法はありますか？

アイテムの注文をCookieにロードして保存したいので、私は尋ねています。

javascriptjqueryhtmljquery-uijquery-ui-sortable
21
Pieter

2012年更新

フル稼働のデモとソース

要素のインデックス位置を取得し、これを読み取ろうとします。

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を使用して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> 
';
}
?>
42
Luca Filosofi

ソート可能アイテムのIDを文字列の配列にシリアル化する toArray メソッドを使用します。

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

[〜＃〜] 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 [] {'：'}）;

7
Ravi Ram

これは私が現在使用しているものです：

<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
1
TheCarver

次のコードを使用して、アイテムの順序を取得しました。

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