ここではのコードを紹介します。
詳しい説明はございません。コピペして使用してください。
ドラッグすることでpx単位の距離を測定するJavaScriptのコード
次のように表示させます。スタート地点の左右問わず距離が計算されます。
ここに表示されます
let startX;
let startY;
let endX;
let endY;
document.addEventListener("mousedown", function(event) {
startX = event.clientX;
startY = event.clientY;
});
document.addEventListener("mouseup", function(event) {
endX = event.clientX;
endY = event.clientY;
let distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
document.getElementById("distance").innerHTML = distance;
});<span id="distance" style="padding: 10px; border: 1px solid #444444;">ここに表示されます</span>説明 マウスボタンが押されたとき、
startXとstartYにマウスカーソルのx座標とy座標を記録します。次に、document.addEventListener("mouseup", function(event)でマウスボタンが離されたとき、endXとendYにマウスカーソルのx座標とy座標を記録します。最後に、2点間の距離を計算します。