HTML5 のドラッグ アンド ドロップで div を画面上の任意の場所に移動できますか? 質問する

HTML5 のドラッグ アンド ドロップで div を画面上の任意の場所に移動できますか? 質問する

タイトルはまさにその通りです。

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

これを HTML5 で実行することは可能ですか? できない場合は、どのように実行すればよいですか?

ベストアンサー1

実に簡単です。

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

これが一つ事前に準備したボーナスポイントとして、要素の上部と左の位置を更新することができます。ドラッグオーバーイベントこれは、ドラッグを許可している部分が、移動する必要がある要素全体ではない場合に便利です。

おすすめ記事