Drag and Drop
HTML ドラッグ＆ドロップ API は、要素をドラッグして別の場所にドロップするインタラクションを実現します。
概要
HTML ドラッグ＆ドロップ API は、要素をドラッグして別の場所にドロップするインタラクションを実現します。
対応ブラウザ
デスクトップ
Chrome 3+
Edge 12+
Safari 4+
Firefox 3.5+
モバイル
Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+
基本構文
HTML
<div draggable="true"
ondragstart="event.dataTransfer.setData('text/plain', 'データ')">
ドラッグして移動
</div>
<div ondragover="event.preventDefault()"
ondrop="event.preventDefault(); alert(event.dataTransfer.getData('text/plain'))">
ここにドロップ
</div>実務での使いどころ
-
Drag and Drop の活用
ドラッグ＆ドロップ API。要素のドラッグ操作とドロップゾーンの制御に使用。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。