マウスドラッグで要素を動かすには？
この記事では、JavaScriptを使用してHTML要素をマウスドラッグで動かす方法を解説します。要素をマウスドラッグで移動させるには、マウスのクリックと移動イベントを監視し、要素の位置を更新する必要があります。簡単なサンプルコードを通じて、この機能を実装する方法を詳細に説明します。
デモ
マウスドラッグで要素を動かすサンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>要素をマウスで動かすサンプル</title>
<style>
#menuContainer {
width: 200px;
height: 100px;
background-color: #f2f2f2;
position: fixed;
cursor: move;
}
</style>
</head>
<body>
<div id="menuContainer">ドラッグして移動</div>
<script>
let isDragging = false;
function handleDragStart(e) {
isDragging = true;
}
function handleDrag(e) {
if (isDragging) {
const x = e.clientX;
const y = e.clientY;
menuContainer.style.left = `${x}px`;
menuContainer.style.top = `${y}px`;
}
}
function handleDragEnd() {
isDragging = false;
}
menuContainer.addEventListener('mousedown', handleDragStart);
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', handleDragEnd);
</script>
</body>
</html>
HTML部分
ドラッグ可能な要素として”menuContainer”というIDを持つdiv要素を定義しました。この要素をマウスドラッグで移動させることが目標になります。
JavaScript部分
let isDragging = false;: マウスが要素をドラッグしているかどうかを示す変数です。ドラッグ中はtrueに設定され、ドラッグが終了したらfalseに戻ります。
let mouseOffsetX, mouseOffsetY;: マウスポインタと要素の位置のオフセットを保持する変数です。これにより、要素の左上隅とマウスポインタの位置の差を計算し、要素を正確にドラッグできます。
handleDragStart(e)でマウスのドラッグが開始されたときに呼び出される関数です。isDraggingをtrueに設定し、マウスの位置と要素の位置の差を計算してmouseOffsetXとmouseOffsetYに格納します。
handleDrag(e)はマウスをドラッグしている間に呼び出される関数です。isDraggingがtrueの場合、マウスの位置とmouseOffsetX、mouseOffsetYの値を使用して要素の位置を更新します。
handleDragEnd()はマウスのドラッグが終了したときに呼び出される関数です。isDraggingをfalseに設定します。
ポイントは関数をイベントリスナーで関数を呼び出してる点です。mousedown、mousemove、mouseupに紐づいています
getBoundingClientRect()
getBoundingClientRect()はあまり聞きなれない関数かもしれませんが、この関数が返す値は以下のプロパティを持つDOMRectオブジェクトです↓
top: 要素の上端のY座標（ページの左上を原点とする座標系での値）right: 要素の右端のX座標（ページの左上を原点とする座標系での値）bottom: 要素の下端のY座標（ページの左上をleft: 要素の左端のX座標（ページの左上を原点とする座標系での値）- width: 要素の幅（ピクセル単位）
- height: 要素の高さ（ピクセル単位）
このコードでは要素の座標を取得するためにgetBoundingClientRect関数を使用しています。
もう少し掘り下げてコードを解説
このコードは#menuContainerにposition: fixed;を指定しているのでウインドウ基準の位置を更新することになります。もしも親要素の中で子要素をマウスドラッグで動かしたい場合はもう少しコードをカスタマイズする必要があります。
また疑問点として、このコードは「マウスの位置と要素の位置の差を要素の位置の更新に使っていますが」↓（この部分）
const boundingRect = menuContainer.getBoundingClientRect();
mouseOffsetX = e.clientX - boundingRect.left;
mouseOffsetY = e.clientY - boundingRect.top;マウスの位置をそのまま要素の位置を更新する値につかえばいいのでは？と思われるかもしれません。たしかにそれでもいいんですが、実際にやってみると要素が即座にマウスの位置に移動するので違和感が生じることになります。
一方、mouseOffsetXを使用することで、マウスをクリックした時点での要素内の相対的な位置を保持し、マウスをドラッグしている間にその相対的な位置を保ったまま要素を移動させることができます。これに関しては言葉では説明しにくいので実際に自分で試してみるとわかると思います。
まとめ
このサンプルコードを使用すると、HTML要素をマウスドラッグで動かすことができます。マウスのクリックと移動イベントを監視し、要素の位置を更新することで、シンプルなドラッグ機能を実現しています。これに機能を加えていくことで面白いものができるかもしれません。たとえば使い捨ての付箋みたいなものが作れるかもしれません。
コメント