Jquery空白の点でソート可能なスタイル関数

Question

これをより効率的に行う方法を学ぶために、を改善する方法や私が間違った道を一緒に歩いているなら、私は興味があります。これまでのところ、私が書いた

、http://jsfiddle.net/mstefanko/LEjf8/9/

これは、私が小規模でそれを望むものを基本的に処理します。

いくつかのバグがあり、これは書かれているほど良いと自信を持っていません。jquery ui sortableにラッチしようとしないのは馬鹿かもしれません。しかし、単純なリストなしでこれを行う必要があるため、複数のドラッグアンドドロップを含むようにこれを拡張したいと思っていたのですが、これを実現するために必要なことは、これらの作業のようなソート機能。

問題児、

これは、すべての（ドロップ可能なのオーバーイベントで呼び出される関数である）

私は

var emptyHolders = []; 

    $('.pipeline-holder').each(function(){ 
     if($(this).hasClass('holder-empty')){ 
      var eid = $(this).attr('id'); 
      emptyHolders.push(eid.substring(14)); 
     } 
    }); 

CIDがある空のスポットのアレイを持っていますあなたが上に乗っているドロップ可能な要素なので、次の空きスロットを見つけることができます。

​​

リストの下に空のスロットがある場合は、forループを使用して、DOMの周りを移動して要素を削除するために必要なスペースを作ります。

if (nextEmpty != null) { 
     var moveMe = nextEmpty -1; 

     for (var i = moveMe; i >= cid; i--) { 

      var nextcount = i + 1; 
      var me = $('#pipeline-rank-' + i);  
      var next = $('#pipeline-rank-' + i).parents('.pipeline-rank-row').next().find('.pipeline-holder'); 
      var pid = $('#pipeline-rank-' + i).find('.content-wrapper').attr('id'); 

      next.append($('#pipeline-rank-' + i).find('.content-wrapper')); 
      next.removeClass('holder-empty'); 
      next.siblings('.remember-my-position-hover').html(pid); 
     } 
     $('#pipeline-rank-' + cid).addClass('holder-empty'); 
    } 

1は、リストのさらに下がない場合、私はにアップアイテムをプッシュするドロップ可能上記スポットがあるかどうかを確認するために、逆に同じことを行います。

ご迷惑をおかけして申し訳ありません。

Answer 1

このような場合は、おそらくDOM要素を直接操作し、jQueryセレクタを使用するのではなく、配列にそれらの参照を保持する価値があります。あなたはemptyHoldersでこれをやり始めましたが、私はすべてのコンテナ（droppable要素）でそれを行います。

私は2つのリスト/配列を保持します.1つはドラッグ前の状態と表示する配列です。ドラッグが新しいコンテナを通過するたびに、状態をプレドラッグ状態にリセットし、そこから変更された状態を再計算し、新しい変更状態を表示します。 （ちらつきを避けるために、私は実際にプレドラッグ状態を表示せず、内部リストをリセットするだけです）。そうすることで、新しく追加されたリストを可能な限り妨げないようにします。現在の要素が空の場合

• 、変更なし：
  は、新しい要素のためのスペースを作るために、私は次のよう示唆しています。
• 現在の要素が空ではないが空のスペースがある場合は、現在のスペースが空になるまで空のスペースの下にあるアイテムを1つ上に移動します。
• 上記のスペースがない場合は、項目を下に移動し、リストに空白がない場合はリストを拡張します。

つまり、お客様のニーズを正しく理解していることを前提にしています。より一般的なケースは、どこでも空のスペースを許可しないことです。すべての挿入は、リストの最後またはリストの先頭に追加されるか、空白を追加しないで2つのリストメンバー間を移動します。リストに何かをドロップすると、別のアイテムに実行されるか、リストの最初のアイテムになるまで、すぐに浮動します。