<p>ドラッグ始点位置座標(x,y) → (<span id="dragStartX">0</span>,<span id="dragStartY">0</span>)</p>
  <p>ドラッグ終点位置座標(x,y) → (<span id="dragEndX">0</span>,<span id="dragEndY">0</span>)</p>
  <p>ドラッグ方向(x軸方向):<span id="dragDirectionX"></span></p>
  <p>ドラッグ距離(x軸方向):<span id="dragDistanceX">0</span>px</p>
  <p>ドラッグ方向(y軸方向):<span id="dragDirectionY"></span></p>
  <p>ドラッグ距離(y軸方向):<span id="dragDistanceY">0</span>px</p>

span{
  color:red;
  font-size:23px;
}

//-------------------------------------------------------------
//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;
  //------------------------------------------------
}