jquery Draggable and sortable を使用して、学生が複数の回答 (赤いボックス) で質問 (青いボックス) に回答し、回答を並べ替えることができるシステムを作成したいと考えています。青いボックスの数は不明であるため、「コンテナ」という名前のクラスを作成しました。
私はそれを設定してjsfiddleに配置しました:http://jsfiddle.net/smethorst/h3ZNd/2/
HTML
<ul id="answers">
<li>Item 1 (+)</li>
<li>Item 2 (+)</li>
<li>Item 3 (+)</li>
<li>Item 4 (+)</li>
</ul>
<ul class="container">
</ul>
<ul class="container">
</ul>
JQuery $(関数() {
$("#answers li").draggable({
connectToSortable: '.container',
helper: 'clone',
revertDuration: 0
});
$(".container").sortable({
revert: true
});
$(".container li").draggable({
connectToSortable: '.container',
revert: "invalid",
});
});
私はjsfiddleにソリューションを配置しました: http://jsfiddle.net/smethorst/h3ZNd/2/
したがって、問題は、回答を別の質問ボックスにドラッグ アンド ドロップできないことです。そのため、アイテムを赤いボックスから青いボックスにドラッグした後、別の青いボックス (クローンなし) にドラッグできるはずです。
ドロップ後に次のようなさまざまなことを試しましたが、うまくいきませんでした:
$(this).append($(ui.draggable));
$(".container").sortable('refresh');
それに対する解決策はありますか?前もって感謝します。