1.Drag Interaction UIとは
ドラッグ操作は、単なるイベント処理ではなく「入力設計」と「状態管理」が重要になります。
先に理解しておくと、実装がかなりスムーズになります。
ドラッグ操作UIは、ユーザーが要素を直接動かせるインタラクションです。
- カード移動
- スライダー
- カンバンUI
- モバイルジェスチャ
など、多くのUIの基本になります。
2.今回作るUI
- 要素をドラッグで移動
- 離したときに少し慣性がつく
- 指やマウス両対応（pointer events）
基本HTML
<div class="stage">
<div class="box"></div>
</div>CSS
body {
margin: 0;
height: 200vh;
background: #0f172a;
display: flex;
align-items: center;
justify-content: center;
}
.stage {
width: 300px;
height: 300px;
border: 1px solid #334155;
position: relative;
}
.box {
width: 80px;
height: 80px;
background: #38bdf8;
position: absolute;
left: 0;
top: 0;
border-radius: 12px;
cursor: grab;
touch-action: none;
}JavaScript（基本ドラッグ）
const box = document.querySelector('.box');
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
box.addEventListener('pointerdown', (e) => {
isDragging = true;
offsetX = e.clientX - box.offsetLeft;
offsetY = e.clientY - box.offsetTop;
box.setPointerCapture(e.pointerId);
});
box.addEventListener('pointermove', (e) => {
if (!isDragging) return;
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
box.style.left = x + 'px';
box.style.top = y + 'px';
});
box.addEventListener('pointerup', () => {
isDragging = false;
});
box.addEventListener('pointercancel', () => {
isDragging = false;
});3.この実装のポイント
pointer eventsを使う理由
- マウス・タッチ両対応
- イベント管理がシンプル
イベント処理の基本構造については、以下の記事で詳しく解説しています。
offsetでズレを防ぐ
offsetX = e.clientX - box.offsetLeft;これがないと、ドラッグ開始時に位置がジャンプします。
4.慣性をつける（応用）
ドラッグ中の速度を記録して、離したあとも動かします。
let velocityX = 0;
let velocityY = 0;
let lastX = 0;
let lastY = 0;
box.addEventListener('pointermove', (e) => {
if (!isDragging) return;
velocityX = e.clientX - lastX;
velocityY = e.clientY - lastY;
lastX = e.clientX;
lastY = e.clientY;
});慣性の動きは、以下の基礎知識と強く関係しています。
requestAnimationFrameで慣性
function animate() {
if (!isDragging) {
velocityX *= 0.95;
velocityY *= 0.95;
box.style.left = box.offsetLeft + velocityX + 'px';
box.style.top = box.offsetTop + velocityY + 'px';
}
requestAnimationFrame(animate);
}
animate();アニメーションの基本構造については、以下の記事で詳しく解説しています。
5.よくある失敗
- touch-action: none を忘れる
- offset計算しない
- pointercaptureしない
- velocityが暴れる
6.実験：Drag Physics Playground
ドラッグして離したときの動きを観察してください。
観察ポイント
- 速く動かす → 強い慣性
- ゆっくり動かす → 小さい慣性
- 減衰で止まる
今回のドラッグUIは、複数の設計要素が組み合わさった実装です。
全体の設計については、以下の記事もあわせてどうぞ。
7.まとめ
ドラッグUIはインタラクション設計の基本です。
- pointer eventsで統一
- 状態管理が重要
- 慣性をつけると一気に体験が良くなる
コメントを残す