HTML Drag and Drop API移动端拖拽如何处理刷新与滚动冲突

原生HTML Drag and Drop API 不支持移动端适配：该API是为桌面端鼠标场景设计的，绝大多数移动端浏览器对其支持残缺，甚至完全不触发对应事件，无法直接用于移动端场景。
移动端拖拽需要基于原生触摸事件实现，在拖拽触发阶段临时阻断浏览器默认的滚动、下拉刷新手势，即可解决事件抢占问题，具体实现如下。

核心解决思路 #

针对下拉刷新、页面滚动抢占事件的问题，处理逻辑如下：

• 给拖拽操作设置移动阈值，只有手指移动距离超过阈值才判定为拖拽启动，避免和普通点击、滑动操作冲突
• 拖拽启动后，通过touchmove事件的preventDefault()方法（必须设置passive: false）阻断默认滚动行为
• 配合CSS属性touch-action: none、overscroll-behavior: none从渲染层阻断下拉刷新、滚动的触发，兼容不同版本浏览器
• 拖拽结束后立刻移除所有阻断逻辑，恢复页面正常交互

适配后可运行代码 #

保留原代码「拖拽元素移动到目标元素后方」的交互逻辑，完整代码如下：

JavaScript 逻辑 #

const dragContainer = document.querySelector(".drag-container");
const elements = document.querySelectorAll(".draggable");
let currentlyDragging = null;
let touchStartY = 0;
// 拖拽触发阈值：手指移动超过10px判定为拖拽，避免误触
const DRAG_THRESHOLD = 10;
let isDragging = false;

// 拖拽阶段阻止默认滚动/下拉刷新
function blockDefaultGesture(e) {
  e.preventDefault();
}

for (const element of elements) {
  element.addEventListener("touchstart", handleTouchStart, { passive: true });
  element.addEventListener("touchmove", handleTouchMove, { passive: true });
  element.addEventListener("touchend", handleTouchEnd);
}

function handleTouchStart(e) {
  const touch = e.touches[0];
  touchStartY = touch.clientY;
  currentlyDragging = e.target;
  isDragging = false;
}

function handleTouchMove(e) {
  if (!currentlyDragging) return;
  const touch = e.touches[0];
  const currentY = touch.clientY;

  // 首次达到拖拽阈值，正式启动拖拽
  if (!isDragging && Math.abs(currentY - touchStartY) > DRAG_THRESHOLD) {
    isDragging = true;
    // 绑定全局阻止默认行为的监听
    document.addEventListener("touchmove", blockDefaultGesture, { passive: false });
    document.body.classList.add("dragging-active");
  }
  if (!isDragging) return;

  // 获取手指当前位置对应的元素
  const hoverElement = document.elementFromPoint(touch.clientX, touch.clientY);
  // 命中可拖拽元素且不是当前拖拽元素时，执行位置交换
  if (hoverElement?.classList.contains("draggable") && hoverElement !== currentlyDragging) {
    dragContainer.removeChild(currentlyDragging);
    currentlyDragging = hoverElement.insertAdjacentElement("afterend", currentlyDragging);
  }
}

function handleTouchEnd() {
  // 清理状态，恢复页面默认交互
  document.removeEventListener("touchmove", blockDefaultGesture);
  document.body.classList.remove("dragging-active");
  currentlyDragging = null;
  isDragging = false;
}

CSS 样式 #

.drag-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 容器内滚动时阻断下拉刷新传递到页面 */
  overscroll-behavior: contain;
}

.draggable {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  /* 禁止触摸时选中文本、触发系统默认交互 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}

/* 拖拽状态下全局阻断默认手势 */
body.dragging-active {
  overscroll-behavior: none;
  touch-action: none;
}

HTML 结构 #

<div class="drag-container">
  <div class="draggable a">a</div>
  <div class="draggable b">b</div>
  <div class="draggable c">c</div>
</div>

注意事项 #

• 不需要保留原代码中draggable="true"属性和原生Drag API相关的事件监听，避免在桌面端和移动端产生冲突
• 阻断默认行为的监听只在拖拽过程中绑定，不会影响页面非拖拽状态下的正常滚动、下拉刷新功能
• 阈值判断可以根据实际交互需求调整，一般设置8-15px是移动端比较舒适的触发距离

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