ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5でドラッグ&ドロップを実装する方法

HTML5でドラッグ&ドロップを実装する方法

藏色散人
藏色散人オリジナル
2021-05-25 11:15:504025ブラウズ

HTML5 でドラッグ アンド ドロップを実装する方法: 最初に空の HTML5 構造を作成し、次に body 要素に div を配置し、最後に 3 つの関数 (allowDrop、ドラッグ アンド ドロップ) を使用してドラッグ アンド ドロップ機能を実装します。

HTML5でドラッグ&ドロップを実装する方法

この記事の動作環境: Windows 7 システム、Sublime Text3&&html5 バージョン、DELL G3 コンピューター

Sublime Text ソフトウェアを開き、新しい空の HTML5 構造。下の図に示すように、

HTML5でドラッグ&ドロップを実装する方法

次に、body 要素に div を配置し、図に示すように、この div に他のコンテンツを実装する必要があります。

HTML5でドラッグ&ドロップを実装する方法

次に、下の図に示すように、領域をより明確にするために、div のスタイル (主に幅、高さ、境界線) を定義し、画像をドラッグ アンド ドロップする準備ができました

HTML5でドラッグ&ドロップを実装する方法

次に、下の図に示すように、ドラッグ アンド ドロップ イベント関数を実装する必要があります。ここで実装する必要があるのは 3 つの関数です。以下の図に示すように、allowDrop、ドラッグ アンド ドロップを実行します

HTML5でドラッグ&ドロップを実装する方法

次に、インターフェイス プログラムを実行すると、ページ上に空のドロップ ボックスと画像が表示されます。以下に示す

HTML5でドラッグ&ドロップを実装する方法

#画像をドロップ フレームにドラッグすると、以下に示すように、画像が自動的にドロップ フレームに入ることがわかります

HTML5でドラッグ&ドロップを実装する方法# つまり、HTML5 のドラッグ アンド ドロップ機能は、主に ondrag、ondropstart、ondropover イベントを実装しており、また、ドラッグする要素の draggable を true に設定することに注意してください。

推奨学習: 「

HTML ビデオ チュートリアル

以上がHTML5でドラッグ&ドロップを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。