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

Question

前提・実現したいこと

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

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

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

該当のソースコード

<div class="drag-and-drop" id="red-box" style="top:1;left:0;background-color:#f48fb1;">drag</div>
<div class="drag-and-drop" id="blue-box" style="top:1;left:110px;background-color:#64b5f6;">and</div>
<div class="drag-and-drop" id="yellow-box" style="top:1;left:220px;background-color:#ffe082;">drop</div>
<div id="target" style="width:500px; height:200px; border: solid 1px navy">
</div>
<script>
document.getElementById( "target" ).onclick = function( event ) {
var x = event.pageX ; // 水平の位置座標
var y = event.pageY ; // 垂直の位置座標
alert(x + ":" + y); // 確認のためアラート表示
}
</script>
```javascript

window.onload = function() {

    //要素の取得
    var elements = document.getElementsByClassName("drag-and-drop");

    //要素内のクリックされた位置を取得するグローバル（のような）変数
    var x;
    var y;

    //マウスが要素内で押されたとき、又はタッチされたとき発火
    for(var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("mousedown", mdown, false);
        elements[i].addEventListener("touchstart", mdown, false);
    }

    //マウスが押された際の関数
    function mdown(e) {

        //クラス名に .drag を追加
        this.classList.add("drag");

        //タッチデイベントとマウスのイベントの差異を吸収
        if(e.type === "mousedown") {
            var event = e;
        } else {
            var event = e.changedTouches[0];
        }

        //要素内の相対座標を取得
        x = event.pageX - this.offsetLeft;
        y = event.pageY - this.offsetTop;

        //ムーブイベントにコールバック
        document.body.addEventListener("mousemove", mmove, false);
        document.body.addEventListener("touchmove", mmove, false);
    }

    //マウスカーソルが動いたときに発火
    function mmove(e) {

        //ドラッグしている要素を取得
        var drag = document.getElementsByClassName("drag")[0];

        //同様にマウスとタッチの差異を吸収
        if(e.type === "mousemove") {
            var event = e;
        } else {
            var event = e.changedTouches[0];
        }

        //フリックしたときに画面を動かさないようにデフォルト動作を抑制
        e.preventDefault();

        //マウスが動いた場所に要素を動かす
        drag.style.top = event.pageY - y + "px";
        drag.style.left = event.pageX - x + "px";

        //マウスボタンが離されたとき、またはカーソルが外れたとき発火
        drag.addEventListener("mouseup", mup, false);
        document.body.addEventListener("mouseleave", mup, false);
        drag.addEventListener("touchend", mup, false);
        document.body.addEventListener("touchleave", mup, false);

    }

    //マウスボタンが上がったら発火
    function mup(e) {
        var drag = document.getElementsByClassName("drag")[0];

        //ムーブベントハンドラの消去
        document.body.removeEventListener("mousemove", mmove, false);
        drag.removeEventListener("mouseup", mup, false);
        document.body.removeEventListener("touchmove", mmove, false);
        drag.removeEventListener("touchend", mup, false);

        //クラス名 .drag も消す
        drag.classList.remove("drag");
    }

}

試したこと

z-indexなどを試したが分からなかった

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

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

マウス操作用のイベントリスナについて
mousedown はありますが mouseup イベントがありません。ごめんなさい。間違いです。
訂正）mouseup 時に マウスの位置取得をしてみてはどうでしょうか？

ドラッグ＆ドロップのマウスボタンの動きを確認してみましょう。

1. ドラッグ ... マウスボタン押下（mousedown） / タッチ（指の数:0->1）
2. ドロップ ... マウスボタン開放（mouseup） / タッチ（指の数:1->0）