ドラッグ＆ドロップで座標を取得

前提・実現したいこと

要素をドラッグしてドロップしたところの座標を知りたい

発生している問題・エラーメッセージ

要素をドラッグ＆ドロップしても座標を取得できない

該当のソースコード

html
1
2<div class="drag-and-drop" id="red-box" style="top:1;left:0;background-color:#f48fb1;">drag</div>
3<div class="drag-and-drop" id="blue-box" style="top:1;left:110px;background-color:#64b5f6;">and</div>
4<div class="drag-and-drop" id="yellow-box" style="top:1;left:220px;background-color:#ffe082;">drop</div>
5<div id="target" style="width:500px; height:200px; border: solid 1px navy">
6</div>
7<script>
8document.getElementById( "target" ).onclick = function( event ) {
9var x = event.pageX ; // 水平の位置座標
10var y = event.pageY ; // 垂直の位置座標
11alert(x + ":" + y); // 確認のためアラート表示
12}
13</script>
14```javascript
15
16window.onload = function() {
17
18    //要素の取得
19    var elements = document.getElementsByClassName("drag-and-drop");
20
21    //要素内のクリックされた位置を取得するグローバル（のような）変数
22    var x;
23    var y;
24
25    //マウスが要素内で押されたとき、又はタッチされたとき発火
26    for(var i = 0; i < elements.length; i++) {
27        elements[i].addEventListener("mousedown", mdown, false);
28        elements[i].addEventListener("touchstart", mdown, false);
29    }
30
31    //マウスが押された際の関数
32    function mdown(e) {
33
34        //クラス名に .drag を追加
35        this.classList.add("drag");
36
37        //タッチデイベントとマウスのイベントの差異を吸収
38        if(e.type === "mousedown") {
39            var event = e;
40        } else {
41            var event = e.changedTouches[0];
42        }
43
44        //要素内の相対座標を取得
45        x = event.pageX - this.offsetLeft;
46        y = event.pageY - this.offsetTop;
47
48        //ムーブイベントにコールバック
49        document.body.addEventListener("mousemove", mmove, false);
50        document.body.addEventListener("touchmove", mmove, false);
51    }
52
53    //マウスカーソルが動いたときに発火
54    function mmove(e) {
55
56        //ドラッグしている要素を取得
57        var drag = document.getElementsByClassName("drag")[0];
58
59        //同様にマウスとタッチの差異を吸収
60        if(e.type === "mousemove") {
61            var event = e;
62        } else {
63            var event = e.changedTouches[0];
64        }
65
66        //フリックしたときに画面を動かさないようにデフォルト動作を抑制
67        e.preventDefault();
68
69        //マウスが動いた場所に要素を動かす
70        drag.style.top = event.pageY - y + "px";
71        drag.style.left = event.pageX - x + "px";
72
73        //マウスボタンが離されたとき、またはカーソルが外れたとき発火
74        drag.addEventListener("mouseup", mup, false);
75        document.body.addEventListener("mouseleave", mup, false);
76        drag.addEventListener("touchend", mup, false);
77        document.body.addEventListener("touchleave", mup, false);
78
79    }
80
81    //マウスボタンが上がったら発火
82    function mup(e) {
83        var drag = document.getElementsByClassName("drag")[0];
84
85        //ムーブベントハンドラの消去
86        document.body.removeEventListener("mousemove", mmove, false);
87        drag.removeEventListener("mouseup", mup, false);
88        document.body.removeEventListener("touchmove", mmove, false);
89        drag.removeEventListener("touchend", mup, false);
90
91        //クラス名 .drag も消す
92        drag.classList.remove("drag");
93    }
94
95}