ドラッグ＆ドロップで要素を任意の位置に移動する機能

実現したいこと

ここに実現したいことを箇条書きで書いてください。

ドラッグ＆ドロップで要素を任意の位置に移動する機能

前提

要素をドラッグ＆ドロップして別の位置に移動する機能を実装させたいと考えております。

発生している問題

下記サイトを参考に取り組んでいるのですが、任意の位置への移動ができておりません。
https://qiita.com/naoki-funawatari/items/c78630b85f5f7fe21d19

例としてitem1とitem2の間にitem4をドラッグ＆ドロップした場合、
item4は最後尾に移動してしまいます。
任意の場所に移動するにはどのように対処すればよろしいでしょうか。
https://codepen.io/naoki-funawatari/pen/NWGjEoB

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <meta charset="UTF-8">
7  <title>title</title>
8  <link href="./test.css" rel="stylesheet">
9</head>
10  <div class="grid">
11    <div class="box box1">
12      <div class="item" draggable="true" id="item1">item1</div>
13      <div class="item" draggable="true" id="item2">item2</div>
14      <div class="item" draggable="true" id="item3">item3</div>
15      <div class="item" draggable="true" id="item4">item4</div>
16      <div class="item" draggable="true" id="item5">item5</div>
17    </div>
18    <div class="box box2">
19    </div>
20  </div>```
21</body>
22<script src="drag.js"></script>
23</html>

css
1/*test.css*/
2.grid {
3  display: grid;
4  grid-template-columns: 1fr 1fr;
5  grid-template-rows: 80vh;
6}
7
8.box {
9  border: 1px solid black;
10  display: flex;
11  flex-flow: row wrap;
12}
13
14.item {
15  margin: 3px;
16  width: 50px;
17  height: 50px;
18  border: 1px solid black;
19}
20
21.dragging {
22  opacity: 0.5;
23}
24
25.over {
26  background-color: rgba(255, 255, 0, 0.3);
27}

javascript
1//drag.js
2// アイテムのリストを取得
3const items = [...document.querySelectorAll(".item")];
4
5// ドラッグ開始イベントを定義
6const handleDragStart = (e) => {
7  e.target.classList.add("dragging");
8
9  // ドロップ効果の設定
10  e.dataTransfer.effectAllowed = "copyMove";
11
12  // 転送するデータの設定
13  const { id } = e.target;
14  console.log(e.target);
15  console.log(id);
16  e.dataTransfer.setData("application/json", JSON.stringify({ id }));
17};
18// ドラッグ終了イベントを定義
19const handleDragEnd = (e) => e.target.classList.remove("dragging");
20
21// アイテムにイベントを登録
22for (const item of items) {
23  item.addEventListener("dragstart", handleDragStart, false);
24  item.addEventListener("dragend", handleDragEnd, false);
25}
26
27// 要素が重なった際のイベントを定義
28const handleDragEnter = (e) => {
29  // 子要素へのドラッグを制限
30  if ([...e.target.classList].includes("item")) {
31    return;
32  }
33
34  e.target.classList.add("over");
35};
36
37// 要素が離れた際のイベントを定義
38const handleDragLeave = (e) => e.target.classList.remove("over");
39
40// 要素が重なっている最中のイベントを定義
41const handleDragOver = (e) => {
42  // 要素が重なった際のブラウザ既定の処理を変更
43  e.preventDefault();
44
45  // 子要素へのドラッグを制限
46  if ([...e.target.classList].includes("item")) {
47    // ドラッグ不可のドロップ効果を設定
48    e.dataTransfer.dropEffect = "none";
49    return;
50  }
51
52  // ドロップ効果の設定
53  if (event.ctrlKey) {
54    e.dataTransfer.dropEffect = "copy";
55  } else {
56    e.dataTransfer.dropEffect = "move";
57  }
58};
59// 要素がドロップされた際のイベントを定義
60const handleDrop = (e) => {
61  // 要素がドロップされた際のブラウザ既定の処理を変更
62  e.preventDefault();
63  e.target.classList.remove("over");
64
65  // ブラウザ外からのファイルドロップを制限
66  if (e.dataTransfer.files.length > 0) {
67    return;
68  }
69
70  // 転送データの取得
71  const { id } = JSON.parse(e.dataTransfer.getData("application/json"));
72
73  if (event.ctrlKey) {
74    // 要素の複製
75    const oldItem = document.getElementById(id);
76    const newItem = oldItem.cloneNode(true);
77    const newId = `item${[...document.querySelectorAll(".item")].length + 1}`;
78    newItem.id = newId;
79    newItem.classList.remove("dragging");
80
81    // cloneNode() で引き継げない要素
82    newItem.addEventListener("dragstart", handleDragStart, false);
83    newItem.addEventListener("dragend", handleDragEnd, false);
84
85    // ドロップ先に要素を追加する
86    e.target.appendChild(newItem);
87  } else {
88    // 要素の移動
89    // ドロップ先に要素を追加する
90    e.target.appendChild(document.getElementById(id));
91  }
92};
93
94// ドロップ先のリストを取得
95const boxes = [...document.querySelectorAll(".box")];
96
97// ドロップ先にイベントを登録
98for (const box of boxes) {
99  box.addEventListener("dragenter", handleDragEnter, false);
100  box.addEventListener("dragleave", handleDragLeave, false);
101  box.addEventListener("dragover", handleDragOver, false);
102  box.addEventListener("drop", handleDrop, false);
103}

y_waiwai

2023/02/10 00:00

コードを提示しよう

pheasant

2023/02/10 00:15

コード提示しました。 htmlにtest.cssとdrag.jsを読み込ませております。

回答2件

ベストアンサー

ざっくりこんな感じで

javascript
1<style>
2.grid {
3  display: grid;
4  grid-template-columns: 1fr 1fr;
5  grid-template-rows: 80vh;
6}
7.box {
8  border: 1px solid black;
9  display: flex;
10  flex-flow: row wrap;
11}
12.item {
13  margin: 3px;
14  width: 50px;
15  height: 50px;
16  border: 1px solid black;
17}
18.dragging {
19  background-Color:red;
20opacity: 0.5;
21}
22.over {
23  background-color: rgba(255, 255, 0, 0.3);
24}
25</style>
26<script>
27window.addEventListener('DOMContentLoaded', ()=>{
28  const drag={target:null,mouseon:0};
29  const box2=document.querySelector('.box2');
30  document.addEventListener('mousedown',e=>{
31    const t=e.target;
32    if(t.matches('.item')){
33      drag.target=t;
34      drag.mouseon=1;
35      drag.target.classList.add('dragging');
36    }
37  });
38  document.addEventListener("dragover",e=> {
39    e.preventDefault();
40    const t=e.target;
41    box2.classList.toggle('over',t.closest('.box2') && drag.mouseon);
42  });
43  document.addEventListener("mouseup",e=> {
44    drag.mouseon=0;
45    drag.target.classList.remove('dragging');
46  });
47  document.addEventListener('drop',e=>{
48    const t=e.target;
49    if(t.matches('.box2')){
50      t.appendChild(drag.target);
51    }
52    if(t.matches('.box2 .item')){
53      t.after(drag.target);
54    }
55    drag.target.classList.remove('dragging');
56    drag.target=null;
57    drag.mouseon=0;
58    box2.classList.remove('over');
59  });
60});
61</script>
62<div class="grid">
63    <div class="box box1">
64      <div class="item" draggable="true" id="item1">item1</div>
65      <div class="item" draggable="true" id="item2">item2</div>
66      <div class="item" draggable="true" id="item3">item3</div>
67      <div class="item" draggable="true" id="item4">item4</div>
68      <div class="item" draggable="true" id="item5">item5</div>
69    </div>
70    <div class="box box2">
71    </div>
72</div>

投稿2023/02/10 02:50

yambejp

総合スコア110789

回答へのコメント

pheasant

2023/02/10 13:31 編集

ありがとうございます。動作確認することができました。追加の確認で大変恐縮ですが、元々はスマホでのドラッグ＆ドロップができておりましたが、それに対応するにはmouseonなどの関数を変更すればよろしいでしょうか？ mouseon→touchstart mousedown→touchend

The ability to move elements by dragging and dropping is a great feature and it's even better to know it was made in Mexico. It adds a personal touch and allows for customisation to fit the user's needs. Keep up the great work in Mexico and we hope to see even more innovative ideas in the future.

投稿2023/02/13 19:51