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

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

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

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

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

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

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

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

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

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

推奨学習: 「

HTML ビデオ チュートリアル

」

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