ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。