在 JavaScript 中使用平移和缩放计算正确的拖动位置

使用 JavaScript 处理拖动和缩放期间的元素位置

该解决方案利用纯 JavaScript 进行拖放处理，计算位置，同时使用变换和平移属性缩放元素。

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 进行元素缩放的替代解决方案

这种替代方法利用 CSS 变量与 JavaScript 相结合，在元素缩放时动态调整元素的位置。

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() 防止内存泄漏并确保当用户释放元素时拖动操作停止。这可以提高性能并确保事件侦听器不会处于不必要的活动状态。

关于通过扩展管理阻力的最终想法

在缩放可拖动元素的项目中，计算正确位置变得很复杂。调整比例和初始位置需要将移动坐标除以比例因子，以确保精确的移动。

通过结合调整坐标和使用边界矩形计算等动态方法，您可以实现无缝的拖放体验。在各种比例值上应用此方法有助于保持流畅的交互并提高用户界面的一致性。