ドラッグアンドドロップ機能を実装しようとしています。左ペインには、画像と考えられるタイルが表示されます。右側のペインに iframe があります。左ペインからタイルをドラッグして、右ペインの iframe にドロップしたいと思います。唯一の問題は、ドロップ時に関連する Web ページが iframe 内に取り込まれるように、各画像/タイルを (同じドメイン内の) Web ページに関連付けたいことです。
jquery ドラッグ ドロップがどのように機能するか、および HTML 5 ドラッグ ドロップがどのように機能するかについての広範なドキュメントがあります。しかし、私が理解できなかったのは、ドロップイベントで入力できるWebページに画像をマップする方法です。
私が考えることができる1つのことは、画像とそれに対応するWebページを同じ名前で保存することです。つまり、画像 xyz.jpg がある場合、対応する Web ページは xyz.html という名前になります。ドロップイベントの時に、「xyz.jpg」から「xyz」を取り除き、「.html」を追加します。その結果、jquery を使用して iframe の「src」フィールドに入れる xyz.html が得られます。
これは問題の良い解決策ですか、それともこれを達成するためのより良い方法があるので、画像と Web ページに同じ名前を付けるという制限はありませんか? これに関して何か助けていただければ幸いです。