JavaScript でリストのドラッグ＆ドロップ

順番付きリスト (OL) や順番なしリスト (UL) のリスト項目 (LI) をドラッグ＆ドロップで順序を入れ替えできるようにするためのコードです。

HTML

リスト項目 (LI) はデフォルトでドラッグができない要素なので、ドラッグできるよう draggable 属性を true にします。

<ul id="drag-and-drop">
    <li draggable="true">ABC...</li>
    <li draggable="true">DEF...</li>
    <li draggable="true">GHI...</li>
</ul>

JavaScript

ドラッグする要素の親要素 (先ほどの HTML の場合は UL) にドラッグ＆ドロップ関連のイベントリスナーを設定します。

const list = document.getElementById('drag-and-drop');
let dragged = null;
list.style.cursor = 'grab';
list.ondragstart = (event) => {
    if (event.target.tagName == 'LI') {
        dragged = event.target;
        dragged.style.cursor = 'grabbing';
    }
};
list.ondragover = (event) => {
    if (event.target.tagName == 'LI') {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
    }
};
list.ondrop = (event) => {
    if (event.target.tagName == 'LI') {
        event.preventDefault();
        event.target.before(dragged);
        dragged.style.removeProperty('cursor');
dragged = null;
    }
};

dragover や dragleave イベントで style (CSS) を設定することで、UI を分かりやすくできます。

list.ondragover = (event) => {
    if (event.target.tagName == 'LI') {
        ...
        event.target.style.borderTop = '2px solid blue';
    }
};
list.ondragleave = (event) => {
    if (event.target.tagName == 'LI') {
        event.target.style.removeProverty('border-top');
    }
};