2012-05-22 12 views
11

jQueryUIのドラッグ/ドロップ可能オブジェクトを使用して、ドロップ時にターゲット要素にドラッグされているアイテムを追加するにはどうすればよいですか? jQuery UIが今働く方法のように見えるのは、絶対位置を指定して画面上のアイテムを動かすだけなのです。残念なことに、この機能によって、フォーム送信は役に立たなくなります。送信時に値の位置を取得できないためです。JQuery UI - ドラッグ可能をDroppableに追加する

ありがとうございます。

+1

$(myDraggable).draggable({ helper:"clone", containment:"document" }); $(myDroppable).droppable({ drop:function(event, ui) { ui.draggable.detach().appendTo($(this)); } }); 

実施例では、それが実際に新しい位置を反映するためにDOMを修正します。私はそれを使ってリストを(AJAX経由で)更新し、それが '完了'コールバックで新しいdivの順序をスキャンすることを知っています。あなたは何をしようとしているのですか? – Sp4cecat

+0

あなたは正確に何をしようとしていますか?それはdraggbleの代わりにソート可能なのを探しているかもしれないように聞こえる:http://jqueryui.com/demos/sortable/ –

答えて

23

私が正しく理解していれば、ドラッグされた要素を現在の親から切り離して新しい要素に追加することができますか?ヘルパーを使用してドラッグを行うことができます(元の要素は影響を受けません)。ドロップすると、それを外してターゲットに追加します(@Olegと@Brianに感謝して元の回答を改善します)。私の経験でjsFiddle

+0

あなたの助けを借りてありがとうございますmgibsonbr!私は本当にあなたがこれを書くのに要した時間と労力を感謝します! – user1110302

+0

これはとても役に立ちます。ありがとうございます。 –

+2

グローバル変数を使用する必要はありません.ui.helperはドラッグ可能なjqオブジェクトです。あなたは開始/停止メソッドを取り除くことができ、それを削除するにはui.helper.detach()。appendTo($(this))にする必要があります。 – Oleg

関連する問題