#実現したいこと
JavaScript(ネイティヴ)で、次の条件を満たす動作を実現したいです。
- 初期画面
・ドラッグで移動可能なボックス(テーブルなどの要素)が一つある状態
・ボックス追加用ボタン「+」、削除用ボタン「-」が表示されている状態
- 「+」ボタンを押すとボックスが新しく作られ表示される
- 追加したボックスはユニークなidを持っていて、ドラッグで動かすことができる
- 「-」ボタンを押すとボックスが削除される
#作成したコード
現在は、追加ボタン「+」のみ実装しています。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>box</title> 6 <link rel="stylesheet" href="bx.css"> 7 </head> 8<body> 9 ボックス追加: 10 <button id="add_box">+</button> 11 12 <div class="box" id="boxes"> 13 <!-- ここを動的に作成したいです 14 <div id="box0"> 15 <table> 16 <tr> 17 <td> 18 hoge1 19 </td> 20 </tr> 21 <tr> 22 <td> 23 hoge2 24 </td> 25 </tr> 26 </table> 27 </div> 28 --> 29 30 <!-- 31 <div id="box1"> 32 <table> 33 <tr> 34 <td> 35 hoge1 36 </td> 37 </tr> 38 <tr> 39 <td> 40 hoge2 41 </td> 42 </tr> 43 </table> 44 </div> 45 --> 46 </div>
JavaScript
1 <script> /*** プラスボタンでボックスを追加 ***/ 2 let add_box = document.getElementById("add_box"); 3 let box_count = 0; 4 add_box.addEventListener("click", () => { 5 let div4box = document.createElement("div"); 6 div4box.insertAdjacentHTML("afterbegin", '<div id=box' + box_count + '><table><tr><td>hoge1</td></tr><tr><td>hoge2</td></tr></table></div>'); 7 let parent_div = document.getElementById("boxes"); 8 parent_div.appendChild(div4box); 9 box_count++; 10 11 /*** ボックス移動 ***/ 12 (function(){ 13 let drg_and_drp = document.getElementById("box0"); 14 let drag_toggle; 15 let x, y; 16 alert(box_count); 17 drg_and_drp.addEventListener("mousedown", (msdwn_evnt) => { 18 drag_toggle = "on"; 19 x = msdwn_evnt.clientX - drg_and_drp.offsetLeft; 20 y = msdwn_evnt.clientY - drg_and_drp.offsetTop; 21 }, false); 22 23 document.body.addEventListener("mouseup", (msup_evnt) => { 24 drag_toggle = "off"; 25 }, false); 26 27 document.body.addEventListener("mousemove", (msmv_evnt) => { 28 if(drag_toggle == "on"){ 29 /****** ここが機能しません ******/ 30 drg_and_drp.style.left = msmv_evnt.clientX - x + "px"; 31 drg_and_drp.style.top = msmv_evnt.clientY - y +"px"; 32 } 33 }, false); 34 })(); 35 }, false); 36 </script> 37 38</body> 39</html>
CSS
1.box table { 2 border-radius: 10px; 3 border: 3px solid deepskyblue; 4 border-spacing: 0; /* 無駄な余白を削除 */ 5 text-align: center; /* 要素をテーブルの中央に寄せる */ 6 7 cursor: grab; 8 position: absolute; 9 z-index: 1000; 10} 11 12.box table tr:first-child td { 13 padding: 0px 15px; /* 上下0px、左右15px */ 14 border-bottom: 2px solid deepskyblue; /* ヨコ線はbottomだけ表示 */ 15} 16 17.box table tr:last-child td { 18 padding: 5px 15px; /* 上下5px、左右15px */ 19 border-bottom: none; /* テーブルの一番下の線を消す */ 20}
#お尋ねしたいこと
動的にボックスを追加でき表示までされるのですが、それをドラッグして移動させることができません。
JavaScriptの最後の関数の中で使用している.style.leftと.style.topの値は変わっているにも関わらず、実際に表示されているボックスの位置に変化がないのですが、どのようにすれば解決できるでしょうか?
どうぞよろしくお願いいたしますm(_ _)m
回答1件
あなたの回答
tips
プレビュー