如何使用JavaScript实现drag事件控制元素仅沿水平方向移动

核心逻辑是拖拽过程中仅修改元素水平方向的位置属性，完全忽略垂直方向的坐标变化，具体步骤如下：

• 拖拽启动（dragstart事件）时记录两个初始值：当前鼠标的水平坐标e.clientX，以及拖拽元素的初始水平偏移量（如果用transform实现位移就记录初始translateX值，如果用定位就记录初始left值）
• 拖拽过程（drag/dragover事件）中仅计算水平方向的位移差：deltaX = 当前e.clientX - 初始记录的clientX，最终水平偏移量 = 初始水平偏移量 + deltaX
• 只给元素设置水平方向的位置属性，完全不修改垂直方向的top/translateY等属性，核心实现示例如下：

let initialX, initialTranslateX;
const dragEle = document.querySelector('.drag-element')

dragEle.addEventListener('dragstart', (e) => {
  initialX = e.clientX
  // 获取当前元素的translateX初始值，无位移时默认为0
  const transform = getComputedStyle(dragEle).transform
  initialTranslateX = transform ? +transform.split(',')[4] : 0
  // 抵消拖拽默认幽灵元素的垂直偏移
  e.dataTransfer.setDragImage(dragEle, 0, 0)
})

dragEle.addEventListener('drag', (e) => {
  // 排除拖拽结束时的无效触发事件
  if (e.clientX === 0) return
  const currentDeltaX = e.clientX - initialX
  // 仅修改translateX，Y轴值全程固定不变
  dragEle.style.transform = `translateX(${initialTranslateX + currentDeltaX}px)`
})

• 如果需要限制水平拖拽的边界，只需要对最终的水平偏移量做范围限制即可，比如不能拖出父容器的话，偏移量最小值为0，最大值为父容器.offsetWidth - dragEle.offsetWidth，超出范围时直接取边界值即可。

内容的提问来源于stack exchange，提问作者Jerry