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

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

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

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

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

387閲覧

エリアAにある要素をエリアBにドラッグ&ドロップした時、エリアAから要素が消えてエリアBに移動するのは何故?

sakuranoki

総合スコア5

HTML5

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

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/10 16:24

前提・実現したいこと

以下のようにドラッグする要素を移動させる際、appendChildメソッドを利用しているのですが、
元々エリアAにあったドラッグ要素が消える理由がわかりません。

エリアA[ ドラッグする要素 ] エリアB [ ]

ドラッグ(appendChild)

エリアA[ ] エリアB[ ドラッグする要素 ]

ソースコードの /* ドロップ領域に落とされたら */ というコメントが書かれた部分に
appendChildが書いてあります。

ご回答いただけると嬉しいです。
よろしくお願いいたします。

該当のソースコード

html5

1<div class="spots" id="spot1"> 2 <div id="target" draggable="true"> 3 4 </div> 5</div> 6<div class="spots" id="spot2"> 7 8</div>

javascript

1function DragAndDrop() { 2 /* 3 * 本来はクラスでまとめて処理 4 */ 5 let target = document.getElementById("target"); //ドラッグ要素 6 let spot1 = document.getElementById("spot1"); //ドロップ先1 7 let spot2 = document.getElementById("spot2"); //ドロップ先2 8 9 /* ドラッグ中/ドラッグ終了なら */ 10 target.addEventListener("drag", (e) => { 11 e.target.style.display = "none"; 12 }); 13 target.addEventListener("dragend", (e) => { 14 e.target.style.display = "block"; 15 spot1.style.backgroundColor = "rgba(0, 0, 0, 0)"; 16 spot2.style.backgroundColor = "rgba(0, 0, 0, 0)"; 17 }); 18 19 /* ドロップ領域に入ったら */ 20 spot1.addEventListener("dragenter", (e) => { 21 spot1.style.backgroundColor = "rgba(185, 43, 39, 0.5)"; 22 }); 23 spot2.addEventListener("dragenter", (e) => { 24 spot2.style.backgroundColor = "rgba(255, 252, 0, 0.5)"; 25 }); 26 27 /* ドロップ領域を離れたら */ 28 spot1.addEventListener("dragleave", (e) => { 29 spot1.style.backgroundColor = "rgba(76, 117, 163, 0.5)"; 30 }); 31 spot2.addEventListener("dragleave", (e) => { 32 spot2.style.backgroundColor = "rgba(76, 117, 163, 0.5)"; 33 }); 34 35 /* ドロップ領域に入っている間 */ 36 spot1.addEventListener("dragover", (e) => { 37 e.preventDefault(); 38 }); 39 spot2.addEventListener("dragover", (e) => { 40 e.preventDefault(); 41 42 }); 43 44 /* ドロップ領域に落とされたら */ 45 spot1.addEventListener("drop", (e) => { 46 e.target.appendChild(target); //ドラッグ先に要素を投入 47 spot1.style.backgroundColor = "rgba(0, 0, 0, 0)"; 48 spot2.style.backgroundColor = "rgba(0, 0, 0, 0)"; 49 target.style.backgroundColor = "#b92b27"; 50 }); 51 spot2.addEventListener("drop", (e) => { 52 e.target.appendChild(target); //ドラッグ先に要素を投入 53 spot1.style.backgroundColor = "rgba(0, 0, 0, 0)"; 54 spot2.style.backgroundColor = "rgba(0, 0, 0, 0)"; 55 target.style.backgroundColor = "#FFFC00"; 56 }); 57 58}

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

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

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

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

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

guest

回答1

0

ベストアンサー

以下のようにドラッグする要素を移動させる際、appendChildメソッドを利用しているのですが、

元々エリアAにあったドラッグ要素が消える理由がわかりません。

すでにHTML上にある要素をappendChildで別な場所に入れると、コピーはされず移動となります。

追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます(他のノードに追加する前にそのノードを親ノードから削除する必要はありません)。(MDNより)

投稿2019/09/10 21:40

maisumakun

総合スコア145121

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

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

sakuranoki

2019/09/10 23:12

ありがとうございます! そして、ろくに調べずに質問してしまってすみません...。次回からは公式リファレンス等を読んだ上で質問します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問