MVC3 で JQuery Sortables を使用して動的にレンダリングされる複数列のインターフェイスを構築しました。
ドロップ可能オブジェクトは、列に配置された 2 つのリストのいずれかにレンダリングされるか、最後のユーザーが列を整理するときにドロップ可能オブジェクトを格納するために使用できる 3 番目のリストにレンダリングされます。
ユーザーが項目を列の位置にドロップすると、ajax 呼び出しによって順序と列の情報がデータベースに保存され、配置が保存されます。その後、ユーザーが次にページにアクセスしたときに、アイテムを配置された位置にレンダリングできます。
問題は、ページが既にリストの 1 つにあるアイテムでレンダリングされた場合、その後の並べ替えが暗黙のうちに失敗することです。アイテムを列にドラッグできますが、通常の並べ替えはできません。このような列のアイテムは、リストの一番下に移動できますが、一番上や他のアイテムの間に移動することはできません。
列が最初に空にレンダリングされた場合、項目をドロップして通常どおりに並べ替えることができます。
問題を示すフィドルを作成しました: Fiddle Link
HTMLコードは次のとおりです。
<div id="processSteps" class="formulaProcessstepsColumn" >
<div class="draggableItem" id="process-step-1">Item 1</div>
<div class="draggableItem" id="process-step-2">Item 2</div>
<div class="draggableItem" id="process-step-3">Item 3</div>
</div>
<div class="clearboth"/>
<div class="formula-processsteps-container">
<div class="drop-column-header">Column A</div>
<div class="drop-column-header">Column B</div>
</div>
<div class="clearboth"/>
<div class="formula-processsteps-container">
<div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
<div class="draggableItem" id="process-step-4">Item 4</div>
</div>
<div id="formula-processsteps-column-2" class="formulaProcessstepsColumn"></div>
</div>