HTML5 のドラッグアンドドロップ

HTML5 ドラッグ＆ドロップ（Drag and Drop）

ドラッグ＆ドロップはHTML5標準の一部です。以下の例では、RUNOOB.COMのアイコンを四角形の枠の中にドラッグしてみましょう。

ドラッグ＆ドロップの概要

ドラッグ＆ドロップ(DnD)は一般的な機能の一つで、オブジェクトを掴んで別の場所に移動させる操作を指します。HTML5では、DnDは標準の一部であり、あらゆる要素をDnDすることができます。

ブラウザの対応状況

Internet Explorer 9+, Firefox, Opera, Chrome, Safari がDnDをサポートしています。ただし、Safari 5.1.2 はDnDをサポートしていない点に注意が必要です。

HTML5 ドラッグ＆ドロップの例

以下に簡単なDnDの実例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>ドラッグ＆ドロップの例</title>
    <style>
        #drag1 {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid black;
        }
        #dropZone {
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 1px solid blue;
            display: inline-block;
        }
    </style>
</head>
<body>

<h2>HTML5 ドラッグ＆ドロップの例</h2>

<p>この画像をドラッグして、青い枠内にドロップしてください:</p>

<img id="drag1" src="https://via.placeholder.com/100" draggable="true" ondragstart="drag(event)">

<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">
    ドロップエリア
</div>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

DOM ノードの詳細

この例は少し複雑に見えるかもしれませんが、DnDイベントの各部分を個別に学習することが重要です。

要素をドラッグ可能にする

まず、要素をドラッグ可能にするためには、draggable属性をtrueに設定します。

<img draggable="true">

何をドラッグするか - ondragstart と setData()

次に、要素がドラッグされる時の動作を規定します。上記の例では、ondragstart属性がdrag(event)関数を呼び出し、ドラッグされるデータを規定します。


        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

Textはドラッグデータのタイプを示し、値はドラッグされる要素のID（ここでは"drag1"）です。

どこにドロップするか - ondragover

ondragoverイベントはデータがドラッグされた時の動作を規定します。デフォルトでは、データや要素を他の要素にドロップすることはできません。これは、event.preventDefault()メソッドを呼び出すことで防ぐことができます。

event.preventDefault()

ドロップする - ondrop

データがドロップされる時にdropイベントが発生します。上記の例では、ondrop属性がdrop(event)関数を呼び出します。


        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

コードの説明：

preventDefault()を呼び出してブラウザのデフォルト動作（リンクとして開く動作）を防ぎます。
dataTransfer.getData("Text")メソッドによってドラッグされたデータを取得します。このメソッドは、setData()メソッドで指定した同じタイプのデータを返します。
ドラッグされたデータはドラッグされた要素のIDであり、これをターゲット要素に追加します。

ブラウザサポートの表

ブラウザ	サポート状況
Internet Explorer 9+	サポート
Firefox	サポート
Opera	サポート
Google Chrome	サポート
Safari 5.1.2 未満	サポート外

QA セクション

1. HTML5のドラッグ＆ドロップはすべてのブラウザでサポートされていますか？

Internet Explorer 9+, Firefox, Opera, Chrome はサポートしています。ただし、Safari 5.1.2以前のバージョンはDnDをサポートしていません。

2. ドラッグ＆ドロップの際にデフォルトの動作を防ぐにはどうすればいいですか？

イベントリスナー内でevent.preventDefault()メソッドを呼び出してデフォルトの動作を防ぐことができます。

3. ドラッグされたデータを取得するにはどうしたらいいですか？

ドラッグされたデータはdataTransfer.getData("Text")メソッドを使って取得できます。このメソッドは、setData()メソッドで設定した同じタイプのデータを返します。