🐧

ドラッグ操作に関する色々な値を取得する

2022/10/04に公開

CSS

取得したデータ

ドラッグの開始位置座標(x,y)
ドラッグの終了位置座標(x,y)
ドラッグの移動距離(X軸方向,Y軸方向)
ドラッグの方向(上下左右)

完成形

コード全体像

JavaScript

//-------------------------------------------------------------
//DOMの取得用コード(実装内容とは無関係です)
let dragStartXElement = document.getElementById("dragStartX");
let dragStartYElement = document.getElementById("dragStartY");
let dragEndXElement = document.getElementById("dragEndX");
let dragEndYElement = document.getElementById("dragEndY");
let dragDistanceXElement = document.getElementById("dragDistanceX");
let dragDistanceYElement = document.getElementById("dragDistanceY");
let dragDirectionXElement = document.getElementById("dragDirectionX");
let dragDirectionYElement = document.getElementById("dragDirectionY");
//-------------------------------------------------------------

//ここから本編
let
  dragStartX, //ドラッグ始点のx座標
  dragStartY, //ドラッグ始点のy座標
  dragEndX, //ドラッグ終点のx座標
  dragEndY, //ドラッグ終点のy座標
  dragDistanceX, //x軸方向のドラッグ距離
  dragDistanceY; //y軸方向のドラッグ距離


//マウスボタンを押したらイベント発火
window.addEventListener("mousedown", function (event) {
  dragStartX = event.clientX; //始点のx座標を取得
  dragStartY = event.clientY; //始点のy座標を取得

  //------------------------------------------------
  //HTMLに出力する用
  dragStartXElement.textContent = dragStartX;
  dragStartYElement.textContent = dragStartY;
  //------------------------------------------------
});

//マウスボタンを離したらイベント発火
window.addEventListener("mouseup", function (event) {
  dragEndX = event.clientX; //終点のx座標を取得
  dragEndY = event.clientY; //終点のy座標を取得
  getDirection();

  //------------------------------------------------
  //HTMLに出力する用
  dragEndXElement.textContent = dragEndX;
  dragEndYElement.textContent = dragEndY;
  //------------------------------------------------
});

//ドラッグした方向と量を取得する用の関数
function getDirection() {
  dragDistanceX = dragEndX - dragStartX;//(終点x座標) - (始点x座標) → 移動距離(x軸方向)を取得
  dragDistanceY = dragEndY - dragStartY;//(終点y座標) - (始点y座標) → 移動距離(y軸方向)を取得

  //移動距離が正なら軸プラス方向、負なら軸マイナス方向への移動と判断できる
  if (dragDistanceX !== undefined && dragDistanceX > 0) {
    dragDirectionXElement.textContent = "右";
  } else if (dragDistanceX !== undefined && dragDistanceX < 0) {
    dragDirectionXElement.textContent = "左";
  } else {
    alert("ドラッグされていません");
  }

  if (dragDistanceY !== undefined && dragDistanceY > 0) {
    console.log("下");
    dragDirectionYElement.textContent = "下";
  } else if (dragDistanceY !== undefined && dragDistanceY < 0) {
    console.log("上");
    dragDirectionYElement.textContent = "上";
  } else {
    alert("ドラッグされていません");
  }
  
  //------------------------------------------------
  //HTMLに出力する用
  dragDistanceXElement.textContent = dragDistanceX;
  dragDistanceYElement.textContent = dragDistanceY;
  //------------------------------------------------
}

やっていること

1.mousedownイベント時に、カーソル位置を取得し始点座標とする
2.ドラッグして、マウスボタンを離した時(mouseup)イベント発火し、カーソル位置を取得(終点座標)
3.ドラッグ方向と距離を得るための関数 getDirectionを用意

getDirection内での処理

1.移動距離 = 終点座標　 - 始点座標で求める
2.移動距離が正の場合、正方向の移動、負の場合は負方向の移動となる条件分岐を行う

終わりに

HTML構造がめちゃくちゃなのは目を瞑ってください。
それと、この機能をプロジェクトで仮に使うときは
まとめて関数化するなり、クラスにするなりした方が良いかもしれません。
変数をグローバルに宣言しているので、グローバル汚染となり得るためです。
冗長なコードになっている箇所も多々あるかと思いますが、
ご指摘、ご助言頂けますとありがたいです。