いくつかの要素が順番に凍結されたJQueryのソート可能なリスト？

Question

私は、JQueryのようなソート可能なリスト（link）を持つメソッドを探していますが、要素のいくつかは固定された避けられない位置にあります。

いくつかの要素を浮き彫りにするのは簡単ですが、上下のドラッグ可能な要素の数が変わる可能性があるため、その位置は固定されません。

具体的には： 私は10の項目のリストをランク付けしています。私は、ユーザがドラッグすることによってアイテムのいくつかのランクを変えることができるようにしたいが（la sortableリスト）、他のフリーズされた要素のランクは変更しない。標準のJQueryのソート可能なアンドラグ可能な機能では、フリーズされたアイテムのランクを、フリーズされたアイテムの上または下のエレメントの数を変更することによって変更できます。

ドラッグするときにリスト要素を「入れ替える」ことで、手動でこれを試してみました。すなわち、リストエレメントがフリーズされていないエレメントの上にドラッグされると、2つのエレメントの位置が入れ替えられます。これは私が望むセマンティクスを与えますが、ドラッグされているアイテムは、新しい位置と現在の「ドラッグ」位置の間で視覚的に「ジャンプ」します。 DOMの位置が変更されたときに、ドラッグオフセットの座標を再計算する必要があります。また、DOMの位置の変更を行う方法もわかりませんそして、ドラッグは、両者の間に再描画を防止し、アトミックな変化をオフセット座標。現在、時には再描画は、両者の間に発生し、要素が目に見えて、すぐにとはいえ、ジャンプします。）

編集 はここに私の手動アプローチを示すjsfiddleです： link。しばらくそれを試してみて、あなたは私が言及したちらつき/飛び出しに気付くでしょう。

Answer 1

、他はと思うし、ここsortableを使用して、それを行うための一つの方法です持っていた：どのchangeに、各固定項目のdataオブジェクト内の固定インデックス位置をstart店には、および、移動します固定項目を元に戻します。

<ol id="rankings"> 
    <li class="sortable">Dog</li> 
    <li class="">Cat</li> 
    <li class="sortable">Parrot</li> 
    <li class="sortable">Gerbil</li> 
    <li class="sortable">Snake</li> 
    <li class="">Goldfish</li> 
</ol> 

Seems to work：リストなどを使用して

$(function() { 
    $('#rankings').sortable({ 
     axis: 'y', 
     items: '.sortable', 
     start: function() { 
      $(this).find("li:not(.sortable)").each(function() { 
       $(this).data("fixedIndex", $(this).index()); 
      }); 
     },   
     change: function() { 
      $(this).find("li:not(.sortable)").each(function() { 
       $(this).detach().insertAfter($("#rankings li:eq(" + ($(this).data("fixedIndex")-1) + ")")); 
      }); 
     } 
    }); 
}); 

。

Answer 2

1）変更したくないアイテムがすべてリストの上部および/または下部にある場合は、リストの外にアイテムを作成することができます。これにより、OTHERアイテムの並べ替えとランキングの保持のみが可能になります不変のものの。

2）「停止」イベントを使用して、希望のランキングが保持されていることを確認できますか？すなわち、4番目の項目の上にまだ3つの項目だけが存在するかどうかチェックし、そうでない場合は、新しい「4番目」を4番目の不変ランクの下に移動します。基本的に、アイテムが違法な場所にドラッグされた後、アイテムの再シフトを強制しますか？

は、私はあなたのフィドル見てきた

Answer 3

私はそれをクラックさせたかもしれないと思います - http://jsfiddle.net/q5c4Y/3/。しかし、かなりの挑戦。いくつかは、リスト項目を交換するイベントの上にドロップ可能なのを使用して

をより構造化マークアップを使用する方法

• に沿って助けはなく、ドロップイベントの順序で、内側のアイテムにいくつかの位置を設定する
• （代わりにdragstop使用します）読書の@ graphicdivineの答えは上記の、それはあなたが本当にすべてに沿って必要なもののように見えます

、が、その親要素の変更後正しい位置にそれらを保つためには、ソート可能なjqueryのUIである