【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する

投稿日 : 2022年02月13日 更新日 :

【Javascript】マウスイベント(mouseEvent)の種類と書き方

マウスの指す座標を理解する

画面上での座標

  document.addEventListener("click", function(event){
    let x = event.clientX;
    let y = event.clientY;
    
    console.log("画面左上角からの(X, Y)座標 : (" + x +", " + y + ")px");
  });

要素内の座標

例

  area.addEventListener("click", function (event) {
    let x = event.clientX;
    let y = event.clientY;
    let propertyX = area.getBoundingClientRect().left;
    let propertyY = area.getBoundingClientRect().top;
    
    console.log("要素左上角からの(X, Y)座標 : (" + (x - propertyX) +", " + (y - propertyY) +")px ");

参考

【Javascript】要素の高さを取得する方法。getBoundingClientRectについて。

ドラッグ & ドロップ

X軸方向だけ解説

  // 要素を取得
  const area = document.querySelector(".area");
  // クリックする画像を取得
  const img = document.querySelector(".gao");
  
  // マウスボタンを押した時
  img.onmousedown = function (event) {
    //  画像上のクリックした場所を取得
    let adjustX =
      event.clientX -
      img.getBoundingClientRect().left +
      area.getBoundingClientRect().left;
    let adjustY =
      event.clientY -
      img.getBoundingClientRect().top +
      area.getBoundingClientRect().top;
    
    // この位置まで移動
    function moveAt(x, y) {
      img.style.left = x - adjustX + "px";
      img.style.top = y - adjustY + "px";
    }
    
    // マウスムーブしているときの処理
    function onMouseMove(e) {
      moveAt(e.x, e.y);
    }
  
    document.addEventListener("mousemove", onMouseMove);
  
    // マウスボタンを離した時の処理
    img.onmouseup = function () {
      document.removeEventListener("mousemove", onMouseMove);
      img.onmouseup = null;
    };
  };

不具合の処理

  // ブラウザ独自のドラッグ&ドロップと競合させない
  img.ondragstart = function () {
    return false;
  };
  // 不具合が起きた時、ダブルクリックでリロード
  window.ondblclick = function () {
    window.location.reload();
  };

応用

紙クズがゴミ箱に入った時の判定

 function inBx() {
  let trashcanRect = trashcan.getBoundingClientRect();
  let trashRect = trash.getBoundingClientRect();
  let inBox =
    trashRect.left >= trashcanRect.left &&  // ゴミ箱左端
    trashRect.right <= trashcanRect.right &&  // ゴミ箱右端
    trashRect.top >= trashcanRect.top &&  // ゴミ箱上端
    trashRect.bottom <= trashcanRect.bottom;  // ゴミ箱下端
    if (inBox == true) {
      return true;  // ゴミ箱に入った時
    } else {
      return false; //  ゴミ箱に入らなかった時 
    }
  }

全体のコード

展開

  const wrapper = document.querySelector(".wrapper");
  const trash = document.querySelector(".trash");
  const trashcan = document.querySelector(".trashcan");
    
  // マウスをクリックした時
  trash.onmousedown = function (e) {
    trash.style.position = "absolute";
    trash.style.zIndex = "1000";
      
    let adjustX =
      event.clientX -
      trash.getBoundingClientRect().left +
      wrapper.getBoundingClientRect().left;
    let adjustY =
      event.clientY -
      trash.getBoundingClientRect().top +
      wrapper.getBoundingClientRect().top;
    
    function moveAt(x, y) {
      trash.style.left = x - adjustX + "px";
      trash.style.top = y - adjustY + "px";
    }
    
    function onMouseMove(e) {
      moveAt(e.x, e.y);
      trash.style.transform = "scale(0.9)";
      onMouseOver();
    }
    
    // 紙クズがゴミ箱の範囲に入った時の処理
    function inBx() {
      let trashcanRect = trashcan.getBoundingClientRect();
      let trashRect = trash.getBoundingClientRect();
      let inBox =
        trashRect.left >= trashcanRect.left &&
        trashRect.right <= trashcanRect.right &&
        trashRect.top >= trashcanRect.top &&
        trashRect.bottom <= trashcanRect.bottom;
      if (inBox == true) {
        return true;
      } else {
        return false;
      }
    }
    
    //  紙クズがゴミ箱の上に載った時（クリックした状態）
    function onMouseOver() {
      if (inBx() == true) {
        trashcan.style.background = "red";
      } else {
        trashcan.style.background = "rgb(216, 208, 224)";
      }
    }
    
    document.addEventListener("mousemove", onMouseMove);
    
    // クリックを離した時の処理
    trash.onmouseup = function () {
      //  紙クズがゴミ箱の範囲内にある時    
      if (inBx() == true) {
        trash.style.display = "none";
        trashcan.style.background = "rgb(216, 208, 224)";
      } else {
        document.removeEventListener("mousemove", onMouseMove);
      trash.style.transform = "scale(1)";
      trash.onmouseup = null;
      }
    };
  };

  // ブラウザ独自のドラッグ&ドロップと競合させない
  trash.ondragstart = function () {
    return false;
  };

まとめ