仅可拖动的 Div x ax - Javascript

在前端开发中，拖动元素是一个常见的需求，而当我们希望某个元素仅可在 x 轴方向拖动时，可以通过 JavaScript 实现。

实现思路

我们可以通过监听元素的鼠标按下、鼠标移动和鼠标抬起事件来实现元素的拖动。在鼠标按下时记录下鼠标的位置和元素的初始位置，随后在鼠标移动时计算鼠标位置和元素初始位置的差值，根据差值修改元素的位置即可。在实现中，我们还需要做一些约束，以确保元素只能在 x 轴方向拖动。

代码实现

下面是一个简单的示例代码，它实现了一个仅可在 x 轴方向拖动的 div 元素：

// 获取元素
const draggableDiv = document.getElementById('draggableDiv');

// 定义变量记录鼠标位置和元素的初始位置
let startX = 0;
let startY = 0;
let initialX = 0;

// 监听鼠标按下事件
draggableDiv.addEventListener('mousedown', e => {
  // 记录鼠标位置和元素的初始位置
  startX = e.clientX;
  startY = e.clientY;
  initialX = draggableDiv.offsetLeft;

  // 阻止事件冒泡
  e.stopPropagation();
});

// 监听鼠标移动事件
document.addEventListener('mousemove', e => {
  // 计算鼠标位置和元素初始位置的差值
  const deltaX = e.clientX - startX;

  // 更新元素的位置
  draggableDiv.style.left = `${initialX + deltaX}px`;

  // 阻止默认行为
  e.preventDefault();
});

// 监听鼠标抬起事件
document.addEventListener('mouseup', e => {
  // 清空记录的变量
  startX = 0;
  startY = 0;
  initialX = 0;

  // 阻止事件冒泡
  e.stopPropagation();
});

在上面的代码中，我们首先获取了要拖动的 div 元素。然后，我们定义了三个变量来记录鼠标位置和元素的初始位置。在鼠标按下事件中，我们用 clientX 和 clientY 记录了鼠标位置，用 offsetLeft 记录了元素的初始位置。在鼠标移动事件中，我们计算了鼠标位置和元素初始位置的差值，用它来更新元素的位置。在移动时，我们使用了模板字面量来构造 left 属性，以实现单独对 x 轴进行操作。在鼠标抬起事件中，我们清空了记录的变量。

总结

通过监听事件我们可以实现元素的拖动，本文的代码针对在 x 轴方向拖动来实现，完成之后还可以实现在 y 轴和任意方向的拖动位置偏移调整，希望能对读者的开发有所帮助！