2

順序付けされていないリスト（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(){
            $('.secondblock').sortable({axis:'y'});

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // set this order to .secondblock

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

考えられる解決策はありますか？

4

2 に答える 2

5

まず、同じIDをドキュメントに2回表示しないようにする必要があります。それはあらゆる種類の問題を引き起こします。

代わりに、最初のリストの対応するアイテムを反映するように、2番目のリストのアイテムにデータ属性を設定します。

<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>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

次に、最初のリストの種類を2番目のリストに反映するのは簡単です。

$('.block').sortable({update: sortOtherList});

function sortOtherList(){
    $('.block li').each(function(){ 
        $('.secondblock [data-block-id=' + $(this).attr('id') + ']')
            .remove()
            .appendTo($('.secondblock'));

    });
}

ここで動作することを確認してください：http：//jsfiddle.net/6HKZG/2/

于 2012-08-08T18:01:42.597 に答える
1

ファウストは私にはよく見えます。それがあなたが望むものであるならば、それをマークしてください。

はい。もっと情報が必要な気がしますが、最近はほぼ同じことをしなければなりませんでした。

まず、JavaScript配列オブジェクトを並べ替えアルゴリズムで拡張します。これが私が使用するものです：

Array.prototype.move = function (old_index, new_index) {
    if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
    }
    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
    return this; // for testing purposes
};

source配列要素をある配列位置から別の配列位置に移動します

次に、これをOldPosition / NewPosition関数と一緒に使用して、並べ替えの前後の要素のインデックスを取得し、このメソッドを使用して配列内のオブジェクトを移動します。

JQueryの並べ替えでは、並べ替えの前後の配列に関する情報を取得できると思います

元：

$('li').presort(function() {
  window.oldindex = $(this).index();
});
$('li').postsort(function() {
  window.newindex = $(this).index();
  array.move(oldindex,newindex);
});

.secondblock並べ替え後に一致させるだけの場合は.block、次のように実行できます：ソース：http：//jqueryui.com/demos/sortable/#events

$( ".selector" ).sortable({
   start: function(event, ui) { //Get the order of the .block list items before dragging }
});
$( ".selector" ).sortable({
   stop: function(event, ui) { //Get the new order of the list items after dragging. Compare the two orders and sort .secondblock to match block }
});
于 2012-08-08T17:48:53.070 に答える