拖拽移动实战分享：轻松搞定JS Dom中距离计算

前端

2023-02-04 16:21:53

JS Dom 距离计算：突破拖拽移动效果的拦路虎

一、认识 JS Dom 中的距离计算方法

作为一名前端开发人员，在实现拖拽移动效果时，你是否经常为 JS Dom 中错综复杂的距离计算方法而感到头晕目眩？别担心，其实这些方法并不复杂。掌握基本原理，你就能轻松驾驭它们。

1. 绝对距离计算

绝对距离计算是指相对于浏览器窗口或文档窗口的距离。你可以使用 clientX、clientY、pageX 和 pageY 等属性来获取元素的绝对距离。

2. 相对距离计算

相对距离计算是指相对于元素本身的距离。你可以使用 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 等属性来获取元素的相对距离。

二、实战案例：实现拖拽头像移动效果

为了加深你的理解，我们通过一个实战案例来演示如何使用这些方法实现拖拽头像移动效果。

1. HTML 结构

<div class="avatar">
  <img src="avatar.png" alt="头像">
</div>

2. CSS 样式

.avatar {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
}

3. JavaScript 代码

const avatar = document.querySelector('.avatar');
const avatarImg = avatar.querySelector('img');

// 鼠标按下事件
avatarImg.addEventListener('mousedown', (e) => {
  // 获取鼠标按下的位置
  const startX = e.clientX;
  const startY = e.clientY;

  // 鼠标移动事件
  document.addEventListener('mousemove', (e) => {
    // 计算鼠标移动的距离
    const moveX = e.clientX - startX;
    const moveY = e.clientY - startY;

    // 设置头像移动的位置
    avatar.style.left = `${moveX}px`;
    avatar.style.top = `${moveY}px`;
  });

  // 鼠标松开事件
  document.addEventListener('mouseup', () => {
    // 移除鼠标移动事件监听器
    document.removeEventListener('mousemove');
  });
});