HTML5をドラッグアンドドロップして、画面上の任意の場所にdivを移動しますか？

Question

タイトルはかなり自明です。

私が見つけたすべてのデモは、特定の場所にdivをドロップすることで構成されています。 E.Gゴミ箱。画面のどこにでもドロップできるドラッグ可能なdivを作成する必要があります。

HTML5でこれを行うことは可能ですか？そうでない場合、どうすればいいですか？

Answer 1

本当に簡単です：

1. dragstartイベントで、ユーザーがドラッグ可能な要素をクリックした場所と左上隅の間のオフセットを計算します
2. 要素をどこにでもドロップできるように、dragoverイベントがドキュメント全体に適用されていることを確認してください
3. dropイベントで、ドロップのclientXおよびclientYで計算したオフセットを使用して、要素を配置する場所を決定します

これは1つです I 以前に準備された 。ボーナスポイントの場合、 dragover event で要素の上下の位置を更新できます。これは、ドラッグできるビットが移動する必要のある要素全体ではない場合に便利です。 。