問題タブ [jquery-droppable]

以前の質問から、ドロップされた後に画像を正常に複製する素晴らしい解決策があります。

コードは次のとおりです。

しかし、問題は、ターゲット領域で一度に 1 つの画像だけを表示したいことです。しかし、現在、ドロップされたすべての画像が表示されています。

より具体的には、ユーザーがターゲット領域に画像をドロップし、後で別の画像をドラッグすると、前の画像がドロップまたはターゲット領域から削除され、新しい画像のみがターゲット領域に表示されます。このデモを参照してください: jsFiddle の例

これを解決するにはどうすればよいですか？

ウィンドウのサイズに基づいてスケールを変更する div に含まれるドラッグ可能な要素を作成する方法を誰かが理解するのを手伝ってくれたら、どんなガイダンスも本当にありがたいです。

私が行った場合：

何が起こるかというと、コンテナの通常サイズの封じ込めができるということです。したがって、 がある場合transform: scale(1.5)、ドラッグ可能な要素が移動できないコンテナ内のスペースができます。

私も試してみましcontainment: 'parent'たが、それは非常にグリッチです。

編集

上と左のコンテインメントを取得する方法はわかりましたが、右と下を取得する方法がわかりません。

幅と高さを試してみましcontainmentArea[0].getBoundingClientRect()たが、それも正しい動きではないようです。

これは、いくつかのサンプルコードの jsfiddle です。

私は過去5〜6時間から掘っていて、本当に困っています。オブジェクトの問題に直面していdraggableます。私がしようとしているのは、18 個の小さなドラッグ可能な div を含むポップアップがあることです。これらのドラッグ可能なアイテムをポップアップから 1 つずつドラッグして、ドキュメントの body にドロップする必要があります。ポップアップは、閉じない限りドキュメント内のすべてを実際にフリーズするブートストラップではありません。これは単純な popup です。私がこれまでに試したことはこれです:-

クローンオブジェクトをドラッグすることもできますが、クローンは正常に作成されています。divGeneralLayOutContentBodyしかし、 （これは私のドキュメント全体のIDです）にドロップした瞬間、クローンオブジェクトは間違った位置に追加されます。時々それらを見ることさえできませんが、デバッガツールを開くと、DOM でそれらを見ることができます。

もう 1 つ、ドラッグ可能なアイテムに css を適用しました。popup で適切に配置するために、ドラッグ可能なアイテムにtopとを設定しました。leftクローンを作成すると、明らかに同じcssが適用されるため、これがクローンに問題を引き起こしているかどうかはわかりません。しかし、クローン オブジェクトをドラッグし続けると、それも変わります。

どんな助けでも大歓迎です。

これは私が話しているポップアップです。ドラッグ可能な項目 1,2,3,...18 が表示されます

http://prntscr.com/8c3dz9

ページの並べ替え可能なリストがあり、ページの 1 つがドロップ可能な「削除」セクションにドラッグされたときに関数を呼び出せるようにしたいと考えています。これは可能ですか？

私はドラッグアンドドロップクイズを作っています ここに完全なコードがあります

もともと数値配列には数値があり、正常に機能していましたが、数値を写真に変更すると、それらをドラッグすることはできますが、適切な場所にドロップすることはできません..それらはドラッグ可能ですしかし、ドロップできません！コードには触れていません。配列とループを変更して写真を表示しただけです。

これは style.css ファイルです

コードはもともと配列内の10要素用です助けてください

ドラッグ アンド ドロップ システムを使用して Web ページを作成しています。

• 3 つのボタンのリストがあり、それぞれがドラッグ可能で、配列にドロップできます。
• この配列では、TDS はドロップ可能であり、前のリストからのボタン、または配列に既に配置されているボタン (列を切り替えるため) を受け取ることができます。
• ボタンの位置をリセットするために、リストもドロップ可能であるため、配列から来る既に配置されたボタンでのみ使用できます。

すべてが正常に機能しています。次のステップに進むために、これら 3 つのボタンが配列にドロップされているかどうかを知りたいです。ドラッグされた要素がドロップされてドロップイベント
に渡されると、その要素が複製されるという印象が強いです。ドロップされた要素はまだ初期リストに存在しますが (DOM PoV から)、配列にも既に存在します (DOM PoV から)

これをテストするためのコードは次のとおりです。console.log で要素番号を確認します。

私のテストから：

• リストから配列にボタンを移動すると、ドロップ イベントの最後に、DOM はまだリストに 3 つのボタンが残っていることを認識していますが、配列にドロップされた 1 つのボタンを既に認識しています --> 残りのボタンをカウントすることは解決策ではありません残りの要素が0であることを確認してください

• ボタンを2つの列の間で切り替えると、ドロップイベントにもう1つのボタンがあるとDOMに認識させます（元の場所からボタンを削除する前に、ボタンを新しい位置に複製します）->どちらも良い解決策ではありません

では、ドラッグ可能なすべての要素が実際に配列にドロップされていることを確認するにはどうすればよいでしょうか?

前もって感謝します ！

ジュリアン・Q.