【JS】ドラッグ＆ドロップの実装方法

本記事では、以下のように直感的にアイテムを操作できるドラッグ＆ドロップの基本的な実装方法について紹介します。

HTML / CSS / JavaScript コード

<div class="draggable" draggable="true" id="draggable-item"></div>
<div id="draggable-zone">
  <div class="dropzone" id="dropzone"></div>
</div>

.draggable {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

.dropzone {
    width: 100%;
    height: 150px;
    background-color: lightgray;
    margin: 10px;
    border: 2px dashed black;
    display: flex;
    justify-content: center;
    align-items: center;
}

const draggableItem = document.getElementById('draggable-item');
const dropzone = document.getElementById('dropzone');

draggableItem.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', draggableItem.id);
});

dropzone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropzone.style.backgroundColor = 'lightgreen';
});

dropzone.addEventListener('dragleave', () => {
    dropzone.style.backgroundColor = 'lightgray';
});

dropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const draggableElement = document.getElementById(id);
    dropzone.appendChild(draggableElement);
    dropzone.style.backgroundColor = 'lightgray';
});

実装のポイント

HTML構造：特定の要素をドラッグできるようにする

draggable="true"属性を設定することで、設定された要素がドラッグできるようになります。

CSSスタイル：ドラッグ＆ドロップできそうなスタイルを適用する

cursor: grab;を設定することで、カーソルが手を開いた形（パー）に変化します。
cursor: grabbing;を設定することで、カーソルが手を握った形（グー）に変化します。

JavaScriptイベント：ドラッグ＆ドロップに関する各種イベントを設定する。

dragstartイベント

ドラッグが開始されたときに発生します。

draggableItem.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', draggableItem.id);
});

e.dataTransfer.setData('text/plain', draggableItem.id)は、ドラッグ中に転送するデータを設定します。ここでは、ドラッグする要素のID（第二引数：draggableItem.id）をテキスト形式（第一引数：text/plain）で保存しています。これにより、ドラッグされた要素がどれであるかをドロップ先で識別できるようになります。

dragoverイベント

ドラッグアイテムがドロップゾーン上にある間に発生します。

dropzone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropzone.style.backgroundColor = 'lightgreen';
});

e.preventDefault()は、ブラウザのデフォルト動作をキャンセルして、要素をドロップできるようにします。（キャンセルしないとドロップできません。）
dropzone.style.backgroundColor = 'lightgreen'によってドロップゾーンの背景色を変更し、ドロップ可能であることが視覚的にわかるようにしています。

dragleaveイベント

ドラッグアイテムがドロップゾーンから離れたときに発生します。

dropzone.addEventListener('dragleave', () => {
    dropzone.style.backgroundColor = 'lightgray';
});

dropzone.style.backgroundColor = 'lightgray'によって、ドロップゾーンの背景色を元に戻します。

dropイベント

ドラッグアイテムがドロップされたときに発生します。

dropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const draggableElement = document.getElementById(id);
    dropzone.appendChild(draggableElement);
    dropzone.style.backgroundColor = 'lightgray';
});

e.preventDefault()はブラウザのデフォルト動作をキャンセルし、カスタム処理を実行できるようにします。
e.dataTransfer.getData('text')は、ドラッグ開始時に設定されたデータ（要素のID）を取得します。このIDを使って、document.getElementById(id)でドラッグされた要素を取得します。次に、dropzone.appendChild(draggableElement)を使って、ドロップされた要素をドロップゾーンに追加します。最後に、dropzone.style.backgroundColor = 'lightgray'でドロップゾーンの背景色を元に戻します。

＜応用例＞複数のアイテム＆エリア

HTML / CSS / JavaScript コード

<div id="draggable-box">
  <div class="draggable" draggable="true" id="draggable-item-1"></div>
  <div class="draggable" draggable="true" id="draggable-item-2"></div>
</div>
<div id="draggable-zones">
  <div class="dropzone" id="dropzone1"></div>
  <div class="dropzone" id="dropzone2"></div>
</div>

#draggable-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 150px;
}

.draggable {
    width: 100px;
    height: 100px;
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

#draggable-item-1 {
    background-color: tomato;
}

#draggable-item-2 {
    background-color: pink;
}

.dropzone {
    width: 100%;
    height: 150px;
    background-color: lightgray;
    margin: 10px;
    border: 2px dashed black;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

const draggableItems = document.querySelectorAll('#draggable-box .draggable');
const dropzones = document.querySelectorAll('#draggable-zones .dropzone');

draggableItems.forEach(draggableItem => {
    draggableItem.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', draggableItem.id);
    })
});

dropzones.forEach((zone) => {
    zone.addEventListener('dragover', (e) => {
        e.preventDefault();
        zone.style.backgroundColor = 'lightgreen';
    });

    zone.addEventListener('dragleave', () => {
        zone.style.backgroundColor = 'lightgray';
    });

    zone.addEventListener('drop', (e) => {
        e.preventDefault();
        const id = e.dataTransfer.getData('text');
        const draggableElement = document.getElementById(id);
        zone.appendChild(draggableElement);
        zone.style.backgroundColor = 'lightgray';
    });
});

＜応用例＞アイテムの順序を入れ替える

ドラッグ＆ドロップで順序を入れ替える方法については以下記事で解説しています。
より直感的に操作できるUIです。

あわせて読みたい

【JS】ドラッグ＆ドロップで表示を入れ替えるUI 本記事では、ドラッグ＆ドロップで複数のアイテムの順番を入れ替える実装方法を解説します。 実装例）To Do リストの順番を入れ替える Task 1 Task 2 Task 3 Task 4 HTM…