質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

pheasant
pheasant

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

1クリップ

479閲覧

投稿2023/02/09 14:38

編集2023/02/10 00:14

実現したいこと

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

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

前提

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

発生している問題

下記サイトを参考に取り組んでいるのですが、任意の位置への移動ができておりません。
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

1

ベストアンサー

ざっくりこんな感じで

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👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

pheasant

2023/02/10 13:31 編集

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

0

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

MarcusJames

総合スコア2

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。