順番付きリスト (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');
}
};
コメントする