ドラッグ アンド ドロップ (Drag and Drop) の HTML5 CSS3 実装 example_html5 チュートリアル スキル

この記事では、HTML5 のドラッグ アンド ドロップ実装について簡単に紹介します。
ドラッグ アンド ドロップは HTML5 標準の一部です。
ブラウザのサポート: Internet Explorer 9、Firefox、Opera 12、Chrome、Safari 5 はドラッグ アンド ドロップをサポートします。

ドラッグされた要素、dragElement:
(1) イベントの追加: ondragstart
(2) 属性の追加: Dragonable

要素を配置、dropElement:
1. イベントを追加: ondargenter、ondragover、ondragleave、ondragend、ondrop
マウスのインとアウトのイベントに非常に似ており、言葉も理解しやすいので、詳細については説明しません。以下に例を示します。

2. ページ上の要素間でドラッグ アンド ドロップします
以下は、各イベントがどのようにトリガーされるかを示す、div 間のドラッグ アンド ドロップの小さな例です:

コードをコピー

コードは次のとおりです:

<メタ文字セット="utf- 8">