JavaScript の移動とスケールを使用して正しいドラッグ位置を計算する

JavaScript を使用したドラッグおよびスケール時の要素の位置の処理

このソリューションは、ドラッグ アンド ドロップ処理に純粋な JavaScript を利用し、transform プロパティとtranslate プロパティを使用して要素を拡大縮小しながら位置を計算します。

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left;
  initialY = rect.top;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px) scale(${scale})`;
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

要素のスケーリングに CSS と JavaScript を使用する代替ソリューション

この代替アプローチでは、JavaScript と組み合わせた CSS 変数を利用して、要素の拡大縮小時に要素の位置を動的に調整します。

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left / scale;
  initialY = rect.top / scale;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.setProperty('--x', initialX + deltaX + 'px');
  draggable.style.setProperty('--y', initialY + deltaY + 'px');
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

ドラッグとスケールの機能を検証するための単体テスト

このセクションでは、JavaScript を使用して、スケーリングされた要素に対してドラッグ アンド ドロップ機能が正しく動作することを検証する単体テストを提供します。

function testDragWithScale() {
  const element = document.createElement('div');
  element.style.width = '100px';
  element.style.height = '100px';
  element.style.transform = 'scale(2)';
  document.body.appendChild(element);
  startDrag({clientX: 100, clientY: 100});
  dragElement({clientX: 200, clientY: 200});
  const computedTransform = getComputedStyle(element).transform;
  console.assert(computedTransform.includes('translate(50px, 50px)'), 'Position adjusted correctly with scale');
}

testDragWithScale();

スケーリングとドラッグ アンド ドロップに関するよくある質問

1. スケーリングはドラッグ アンド ドロップの位置にどのような影響を与えますか?
2. スケーリングすると要素のサイズが変化するため、適切な位置を維持するには、移動をスケール係数で割って動きを調整する必要があります。これにより、要素がカーソルとともに正しく移動するようになります。
3. どのような役割をするのか getBoundingClientRect() これで遊ぶの？
4. getBoundingClientRect() は、ビューポートに対する要素の現在の寸法と位置を提供し、正確な動きとオフセットを計算するのに役立ちます。
5. 要素をドラッグするときに異なるスケール値を考慮するにはどうすればよいですか?
6. 移動距離をスケールで割ることにより、要素の移動がそのサイズに比例するようにすることができます。も使用できます setProperty() スケール値に基づいて CSS 変数を動的に更新します。
7. この機能を他の要素に再利用できますか?
8. はい、モジュラー コードを記述し、再利用可能な関数にドラッグ アンド ドロップ ロジックをカプセル化することで、スケールや変換プロパティに関係なく、複数の要素に同じ機能を適用できます。
9. なぜ使用する必要があるのか removeEventListener() ドラッグが終了したら?
10. 使用する removeEventListener() メモリ リークを防ぎ、ユーザーが要素を放したときにドラッグ アクションが停止するようにします。これによりパフォーマンスが向上し、イベント リスナーが不必要にアクティブにならなくなります。

スケーリングによる抗力の管理に関する最終的な考え方

ドラッグ可能な要素が拡大縮小されるプロジェクトでは、正しい位置の計算が複雑になります。スケールと初期位置の両方を調整するには、移動座標をスケール係数で除算して、正確な移動を保証する必要があります。

座標の調整や境界四角形の計算の使用などの動的な方法を組み込むことで、シームレスなドラッグ アンド ドロップ エクスペリエンスを実現できます。このアプローチをさまざまなスケール値に適用すると、スムーズな操作が維持され、ユーザー インターフェイスの一貫性が向上します。