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

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

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

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

Q&A

解決済

2回答

252閲覧

javascriptを使ったドラッグ&ドロップで、ドロップ先にコピーしたい

cnoise1976

総合スコア2

JavaScript

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

0グッド

0クリップ

投稿2024/03/05 02:59

実現したいこと

Javascriptを使ったドラッグ&ドロップで、元のリストは全て残したままでドロップ先にはコピーされたアイテムを追加したい。

[アイテムA] [アイテムB] [アイテムC]

とリストがあって、そのうちアイテムBをドラッグし&ドロップした際に

ドロップ元には
[アイテムA] [アイテムB] [アイテムC]
が残ったまま、ドロップ先に
[アイテムB]
が表示されているようにしたい

発生している問題・分からないこと

WEBでドラッグ&ドロップを開設してくれているサイトを参考にスクリプトを記述したが、
ドロップ元から [アイテムB] が移動する形にしかならない。

23行目にある「dropEffect = 'copy'」

とすればコピーされると思っていたのですが、他に何か必要なのでしょうか?

該当のソースコード

JavaScropt

1document.addEventListener('DOMContentLoaded', function () { 2 const dragItems = document.querySelectorAll('.drag-item'); 3 const dragContainer = document.querySelector('.drag-container'); 4 const dropArea = document.querySelector('.q110drop_area'); 5 6 let offsetX, offsetY, draggedItem; 7 8 dragItems.forEach(dragItem => { 9 dragItem.addEventListener('dragstart', function (e) { 10 draggedItem = this; 11 offsetX = e.clientX - this.getBoundingClientRect().left; 12 offsetY = e.clientY - this.getBoundingClientRect().top; 13 this.style.opacity = '0.5'; 14 }); 15 16 dragItem.addEventListener('dragend', function () { 17 this.style.opacity = '1'; 18 }); 19 }); 20 21 dragContainer.addEventListener('dragover', function (e) { 22 e.preventDefault(); 23 e.dataTransfer.dropEffect = 'copy'; 24 }); 25 26 dragContainer.addEventListener('drop', function (e) { 27 e.preventDefault(); 28 29 if (draggedItem) { 30 const x = e.clientX - offsetX; 31 const y = e.clientY - offsetY; 32 33 draggedItem.style.left = `${x}px`; 34 draggedItem.style.top = `${y}px`; 35 36 // No need to clone, just move the original element 37 dragContainer.appendChild(draggedItem); 38 39 draggedItem = null; 40 } 41 }); 42 43 dropArea.addEventListener('dragover', function (e) { 44 e.preventDefault(); 45 }); 46 47 dropArea.addEventListener('drop', function (e) { 48 e.preventDefault(); 49 50 if (draggedItem && !dropArea.contains(draggedItem)) { 51 if (dropArea.children.length < 3) { 52 dropArea.appendChild(draggedItem); 53 } else { 54 // Handle maximum 3 items in the drop area 55 } 56 } 57 }); 58}); 59

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

リストの入れ替えやファイルのドロップ等の情報は見つかるのですが、
元のリストを残したままというのを見つけられなかったです。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

コピーすればいいだけでは?
ただしコピーすると同じ要素が複数登録できますのでそれを避けたいなら工夫が必要です

javascript

1<style> 2.wrap{ 3 display:flex; 4} 5.wrap ul{ 6list-style:none; 7padding:0; 8width:100px; 9} 10#newlist{ 11background-Color:yellow; 12} 13#orglist{ 14background-Color:lime; 15} 16 17</style> 18<script> 19const dragobj={} 20document.addEventListener("dragenter", (event) => { 21 if(event.target.matches('#newlist')){ 22 event.preventDefault(); 23 } 24}); 25document.addEventListener("dragover", (event) => { 26 if(event.target.closest('#newlist')){ 27 event.preventDefault(); 28 } 29}); 30document.addEventListener("drag", (event) => { 31 //dragobj.target=event.target; //コピーしなければ移動 32 dragobj.target=event.target.cloneNode(true); 33}); 34document.addEventListener("drop", (event) => { 35 const droppable=event.target.closest('#newlist'); 36 if(droppable){ 37 if(event.target==droppable){ 38 droppable.appendChild(dragobj.target); 39 }else{ 40 droppable.insertBefore(dragobj.target,event.target); 41 } 42 dragobj.target=null; 43 } 44}); 45</script> 46<div class="wrap"> 47<ul id="orglist" class="list"> 48<li draggable="true">a</li> 49<li draggable="true">b</li> 50<li draggable="true">c</li> 51<li draggable="true">d</li> 52<li draggable="true">e</li> 53<li draggable="true">f</li> 54</ul> 55<ul id="newlist" class="list"> 56</ul> 57</div>

投稿2024/03/05 03:51

yambejp

総合スコア114721

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

js

1 // No need to clone, just move the original element 2 dragContainer.appendChild(draggedItem);

ここで draggedItem を複製して appendChild() に渡す必要があります。

または、dragstart 時にターゲット要素を複製して元の場所に挿入しておく方がコピーっぽいUXになるかもしれません。

投稿2024/03/05 03:11

編集2024/03/05 03:15
int32_t

総合スコア20761

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cnoise1976

2024/03/05 06:04

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問