問題タブ [droppable]

望ましい動作:

ユーザーが項目をツリーにドラッグします。閉じたノードにカーソルを合わせると、ノードが展開され、子が表示されます。この時点で、ユーザーは引き続き子ノードにドラッグして、それらのいずれかにドロップできます。

これはうまくいきました。ドロップ可能オブジェクトの「over」オプションを使用して、ノードを展開し、子をドロップ可能にします。

しかし、さらに機能を追加する必要がありました。最初に、ドラッグ可能なヘルパーを追加しました。まだ正常に動作しています。次に、ドラッグ可能オブジェクトとドロップ可能オブジェクトを 2 つの異なるコンテナー (div) に入れます。この時点で、ヘルパーはコンテナーからドラッグしません。解決策は、ドラッグ可能オブジェクトに「appendTo: 'body'」を設定することでした。すべて良い...まあ、そうではありません。

これで、現在のドラッグ操作中に子ノードをドロップできなくなりました。ユーザーは、現在のドラッグを解放し、目的の子ノードに再ドラッグする必要があります。appendTo オプションを削除すると問題は解決しますが、ヘルパーはドロップ可能なコンテナーに視覚的に移動しません。

これらの新しいドロップ可能アイテムを「起動」して、すぐにドロップ可能にする方法はありますか?

JQuery UI Droppableの例を参照した後：ショッピングカート。テスト用に書き直しましたが、問題がありました。

仮定 ：

商品コンテナ：商品をショッピングカートコンテナにドラッグアンドドロップします。

およびショッピングカートコンテナ：

その他のショッピングカートコンテナ：

そして、shoppingCart1の製品は、他のショッピングカートコンテナにドラッグアンドドロップできますが、それ自体はできません。その逆も可能です。例：

問題は：

商品がs* hoppingCart1 *にドロップされた後、shoppingCart1内の商品を他のショッピングカートコンテナにドラッグアンドドロップできますが、商品を独自の内部にドラッグアンドドロップすると、商品も追加されるようです。 。つまり、 shoppingCart1の商品をドラッグして、 shoppingCart1自体にドロップすると、shoppingCart1にも追加されます。

どうもありがとうございます！

コードの一部をJQueryUIから書き直しますDroppable：shopping cart exmaple！[私の望みどおりに機能しません]

jQuery UI を使用して、fooドラッグとドロップの両方が可能な div と、ドロップbarのみが可能な div があります。helper: 'clone'このオプションをオンにするとドラッグが発生するため、オリジナルfooは実際には移動していません。clonedfooを元の の上にドロップするfooと、drop: functionは呼び出されません。

fooクローンをにドロップすると機能するため、これは奇妙に思えますbar。また、他のドラッグ可能なものを にドロップすることもできfooます。唯一の問題は、自分自身にドロップできないことfooです。

foo と bar とドラッグ可能とドロップ可能と何度も言ったので、私でさえ混乱していますが、この例は物事を明確にするはずです:

http://jsfiddle.net/5KATZ/

最初のボックスを 2 番目または 3 番目のボックスにドラッグしようとすると、うまくいきます。しかし、2 番目のボックスにドロップするのではなく、ドラッグを開始してから、それ自体にドロップしようとしても、何も起こりません。これが物事がうまくいくはずの方法である場合、私は何を間違っていますか? これが jQuery UI のバグである場合、何か良い回避策を思いつきますか?

ドラッグ可能なアイテムがドロップされたが、ドロップ可能なアイテム内にないときにイベントを処理したい。これまでのところ、これだけしか取得できませんでした：

しかし、問題は、#myDroppable何かが追加されたときに要素を変更していることです。そのため、次に何かをドロップするときは、 ではなく、新しい子の id にevent.srcElement.idなる可能性があります。myDroppable上にオーバーレイを追加することもできますが、スクロールバーがあるとさらに複雑になります。このイベントを処理する別の方法はありますか?

JQueryUIで行き詰まりました。具体的には、次のhtmlを切り取っています。

次に、JQueryUIライブラリを介してアイテムを「宛先」ボックスにドラッグアンドドロップできるようにします。したがって、私はこのjavascriptスニペットを使用します。

結果に関する限り、これは完全に機能しますが、「元に戻す」を処理するアニメーションは、私が望むように動作しません。問題は、ドラッグが明らかに「position：relative」を設定してから「top」および「left」cssプロパティを変更することによって実装されることです。アイテムが新しいコンテナにアタッチされると（復帰アニメーションの前に発生します）、新しいコンテナに対して相対的に配置されるため、アイテムは新しい位置にジャンプします。これで、復帰アニメーションが新しい位置から開始されます。

アイテムを新しいコンテナにアタッチした後、スムーズに元に戻すアニメーションを作成する方法はありますか？おそらく私はこれを完全に間違った方法で行っているので、別のアプローチを提案することを躊躇しないでください。

新しいコンテナの絶対位置に基づいてcssの左と上のプロパティを再計算しようとしていますが、これはもちろん最初にドロップされたアイテムに対してのみ機能し、2番目のアイテムは最初のアイテムの位置を追加で考慮する必要があります。

ありがとう。

このフォーラムは初めてです

私は 2 週間から jquery を学びましたが、かなり未熟です。私のサイトはasp.net mvcで構築されており、jquery 1.4.1を使用しています

これがコードです

html

...

....

脚本

問題は、id 属性の値が常に 1 (インデックス変数) であるのに対し、1 と 2 であることです (赤い行) どこが間違っていますか?

返信ありがとうございます アルベルト

ドラッグ可能なものを受け入れるjQuery UIドロップ可能があります。特定の条件が満たされた場合にドロップ アクションを許可しないようにしたい。

ドロップ アクションをキャンセルして、元に戻すようなアクションを実行するにはどうすればよいですか?

デモ: http://jsfiddle.net/vMQVy/2/

アイテムを取り出して、ゴミ箱に入れます....次に、そのアイテムをゴミ箱から削除し、もう一度試してください（同じアイテムまたは他のアイテム）...

ドロップ可能はまだ「無効」

コードの一部:

解決策を教えてください。

イメージを 2 つのコンテナー (コンテナー 1 とコンテナー 2) のいずれかにドラッグできるようにしたいと考えています。そこから、イメージがドロップされたコンテナーに応じて、データベース呼び出しでそのコンテナーを更新したいと思います (または、テーブルの 1 つの行を更新するだけです)。

これを実現するためにhttp://jqueryui.com/demos/droppable/を使用したいのですが、リクエストを処理する方法と、各コンテナーにイベントハンドラーをリッスンさせる方法がわかりません (画像）。

私が何を意味するかを説明するために、以下に非常に悪い図を描きました。

jQueryUIでドラッグアンドドロッププラグインを使用しています。ドラッグ可能なコンテナは、コンテナ上でのみドラッグアンドドロップできるようにしたいと思います。デモンストレーションでは：

http://jqueryui.com/demos/droppable/#revert

2つのオプションがあります。1つは、コンテナにドラッグしたときに元に戻すことです。もう1つは、コンテナにドラッグしていないときに元に戻すことです。

これら2つを組み合わせる方法はありますか？#droppableコンテナがない場所に#draggableコンテナをドラッグできないようにしたくありません。