ドラッグ＆ドロップのJavascript

taka_oj
|
2024年4月16日
| コメントはまだありません
| JavaScript

今回はドラッグ＆ドロップのイベントを使ったJavascriptをご紹介します。

flexで並べた要素を「dragstart、drop、dragenter、dragleave、dragover」５つのイベントを使って
ドラック＆ドロップの動きをつくります。実装すると直感的に移動できるのでとっても便利です。
デモページは、こちら

↓デモページのサンプルコードは以下となります。

▼HTML

<body>
    <h3>ドラッグ＆ドロップ</h3>
    <div class="flex">
        <div id="1" class="drag item">drag1</div>
        <div id="2" class="drop item">drop1</div>
        <div id="3" class="drop item">drop2</div>
        <div id="4" class="drop item">drop3</div>
    </div>
</body>

▼CSS

<style>  
body {
  text-align: center;
}

.flex {
  display: flex;
  justify-content: center;
}

.item {
  line-height: 80px;
  height: 80px;
  width: 80px;
  border: 1px solid gray;
}

.drag.item {
  background-color: skyblue;
}

.dragging.item {
  background-color: skyblue;
  opacity: 0.3;
}
</style>

▼Javascript

<script>
document.querySelector(".drag.item").draggable = true;
document.querySelector(".drag.item").addEventListener("dragstart", onDragStart);

document.querySelectorAll(".drop.item").forEach((element) => {
    element.addEventListener("drop", onDrop);
    element.addEventListener("dragover", onDragover);
    element.addEventListener("dragenter", onDragenter);
    element.addEventListener("dragleave", onDragleave);
});

function onDrop(event) {
    event.currentTarget.classList.remove("dragging");
    const items = [...document.querySelectorAll(".item")];
    if (items.indexOf(event.currentTarget) === 0) {
        event.currentTarget.before(document.getElementById(event.dataTransfer.getData("text")));
    } else {
        event.currentTarget.after(document.getElementById(event.dataTransfer.getData("text")));
    }
}

function onDragStart(event) {
    event.dataTransfer.setData("text", event.currentTarget.id);
}

function onDragenter(event) {
    event.currentTarget.classList.toggle("dragging");
}

function onDragover(event) {
    event.preventDefault();
}
function onDragleave(event) {
    event.currentTarget.classList.toggle("dragging");
}
</script>

デモの作成には、サンプルページ『JavaScript で ドラッグ＆ドロップをやってみる-@sueasen』さんを参考にしました。

ありがとうございます。

JavaScript