1

順序付けられていないリスト (ul) に jquery draggble 関数を使用していますが、変更後にアイテムの順序を取得し、ページが読み込まれたときに順序を設定するという問題に直面しています。次のコードがあるとします。

<html>
   <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>  </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
      $(document).ready(function(){

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // send this order to index.php and store it in db

            }
         });
      });
  </script>

  </head>
  <body>
      <ul class="block" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
  </body>

そして2番目のファイルは

<html>
  <head>
  <script>
         $('.secondblock').sortable({axis:'y'});
      // get order from index.php and set it to .secondblock

  </script>
  </head>
    <body>
     <ul class="secondblock" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
    </body>
 </html>

可能な解決策はありますか？

4

1 に答える 1

5

私がコメントしたリンクでそのソリューションを使用したくない場合は、これをより簡単に使用できます。

function reorder(orderArray, elementContainer)
{
    $.each(orderArray, function(key, val){
        elementContainer.append($("#"+val));
    });
}

orderArray : 必要な順序ですべての ID を含む配列(正確にsortable ( "toArray")が返すもの)

elementContainer : ソート可能なアイテムを含む jQuery オブジェクトです。

ここでの実例:
http://jsfiddle.net/ecP5k/1/

于 2012-08-09T04:24:23.613 に答える