1

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>
4

1 に答える 1

0

この問題に遭遇した他の人のために...

この問題の原因は、リスト アイテムがここにあるように HTML でその場でレンダリングされると、並べ替えが失敗することです。

<div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
     <div class="draggableItem" id="process-step-4">Item 4</div>
</div>

解決策は、HTML ソート可能オブジェクトがレンダリングされた後にリスト項目を動的に追加することです。これを行うには、最初に HTML で空の sortable を定義します。

<div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
     <!--- note the list item that used to be here has been removed --->
</div>

次に、JavaScript を使用してリスト項目を動的に追加します。

$(document).ready(function() {
...
    $('#formula-processsteps-column-1').html('<div class="draggableItem" id="process-step-4">Item 4</div>')
}

実際の例を見たい場合は、フィドルを更新しました

于 2012-11-30T01:13:05.580 に答える