ユーザーは画像をアップロードし、アップロードした画像をページ上のプレースホルダーにドラッグします。彼らは基本的に、テンプレート グリッド内のさまざまな画像のレイアウトを設計しています。
画像にはドラッグ可能、プレースホルダーにはドロップ可能を使用するコードを作成しました。これにより、画像をプレースホルダーに簡単にドロップできます。画像がプレースホルダーに入ると、画像を移動/ドラッグして、画像のさまざまな部分をプレースホルダー内で見ることができます。画像 (プレースホルダーにドロップされると) は制限された新しいドラッグ可能になるため、ユーザーは画像を端までしか移動できません。
問題は次のとおりです。画像がプレースホルダーに入ったら、あるプレースホルダーから別のプレースホルダーにドラッグしたいです。しかし、それらはプレースホルダーの形状にクリップする親要素内にあるため、それほど単純ではありません。私の当初の考えは次のとおりです。
- マウスの位置 (ドラッグ中) がプレースホルダーの外側に 10 ピクセルあることを検出します
- 画像のクローンを作成し、そのクローンを body タグに追加します
- 複製された画像をマウスに追従させる
- ユーザーがプレースホルダー上でのドラッグ (マウスアップ) を停止したら、2 つのプレースホルダー (元のドラッグを開始したものとマウスアップをトリガーしたもの) の間で画像を交換します。
これらの線に沿って、プレースホルダーでマウスアップを使用するものを作成し、現在ドラッグされている画像をグローバル変数で追跡しました。ここに例があります：http://goo.gl/0cXCM
その例を書き直して、可能な場合は Jquery UI ドロップ可能を使用して新しい画像をプレースホルダーにドラッグできるようにします。ドロップ可能なコードは、その例のコードよりも操作がはるかに簡単で、画像がプレースホルダーにドロップされていない場合は、画像を「元に戻し」、アニメーション化してリストに戻すことができます。
上記のポイント 1 ～ 3 は単純ですが、複製された画像は実際のドラッグによって初期化された実際のドラッグ可能ではないため、ドロップ可能なプレースホルダーに「ドロップ」しません。そういうわけで、私はもともとドロッパブルなしでそれを書きました。
私が試してみました：
- 複製された画像をドラッグ可能にし、トリガーを使用して複製で mousedown/dragstart イベントを発生させます。(動作していません)
- スタック オーバーフローでドラッグの開始に関する質問を検索しましたが、私が見つけたのは主に、別の要素をクリックしてドラッグを開始することに関するものでした。クリックする必要はありません。
詳細: マウスをクリックして移動し、プレースホルダー内の画像上でドラッグを開始します。マウスがまだ押されていて、プレースホルダーの外に 10 ピクセル移動している間、複製された画像がページに追加されます。mousemove では、複製されたイメージの位置が更新されます。この間ずっと、マウスはまだダウンしています。クローンされた画像がドロップされたときにそれを識別できる唯一のもの（私は思う）は、プレースホルダーのマウスアップイベントです。
これを機能させるためのより良い方法はありますか？クローン化されたイメージを配線して、合理的に標準的なドロップ可能なコードを使用できますか?