JavaScriptでドラッグ移動できる要素を動的に作成したい

#実現したいこと
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

kei344

2018/12/30 03:37

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

masayasasaki96

2018/12/30 05:11

kei344さん、コメントをくださりありがとうございます！コード等を加筆いたしましたので、何かアドバイスを頂けますと大変助かります。どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

動かないのは、CSSの問題です。

CSS
1body {
2  height: 100vh;
3}
4.box>div>div {
5  position: absolute;
6}
7```**動くサンプル：**[https://jsfiddle.net/uyfbko1m/1/](https://jsfiddle.net/uyfbko1m/1/)