この記事では、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 間のドラッグ アンド ドロップの小さな例です:
