★ FEATURED ARTICLE 1. 项目概述为什么原生拖拽不是“写个 onmousedown 就完事”“实现四种原生JavaScript拖拽效果”——这标题乍看平平无奇像极了某次前端面试的白板题或是某份被压在文件夹底层的旧需求文档。但我在某高校实验室带学生做交互系统开发时连续三年发现超过70%的学员在第一次独立完成“可拖动弹窗”时卡在鼠标松开后元素还跟着指针跑而当他们尝试“列表项排序拖拽”时90%以上会写出无法响应快速拖动、位置跳变、甚至触发多次 drop 的代码。问题从来不在“会不会写 addEventListener”而在于对拖拽生命周期本质的理解断层。这四种效果不是并列的“功能点清单”而是按交互复杂度与 DOM 响应粒度递进的实战切片基础位移拖拽自由拖动浮层——解决坐标映射与事件解耦边界约束拖拽窗口内拖动——处理 clientX/clientY 与 getBoundingClientRect 的动态换算吸附式拖拽靠近目标自动吸附——引入距离阈值、方向判定与过渡动画控制列表排序拖拽类似 TodoMVC 的任务重排——需管理 placeholder 插入、数据索引同步、视觉反馈节奏。它们共同指向一个被多数教程忽略的核心矛盾浏览器原生 drag drop API 与真实业务场景的错配。原生 API 强制要求设置 draggabletrue会劫持默认文本选中行为且不支持 touch 设备的平滑迁移而手动实现的 mousedown → mousemove → mouseup 流程又极易因事件监听器绑定时机、this 指向、节流失当导致逻辑断裂。我试过用 37 行纯 JS 实现第一种效果但加到第四种时代码膨胀到 214 行其中 86 行是为修复“快速拖动时 placeholder 插入错位”写的兜底逻辑——这恰恰说明拖拽不是特效是状态机。适合谁读如果你正面临这些场景需要在无框架环境下如嵌入式设备 Web UI、老旧系统改造实现拖拽或正在调试 React/Vue 项目中第三方拖拽库的兼容性问题想穿透到底层原理又或者你刚写完一个“能拖”的 demo却发现用户反馈“拖得卡”“松手后还飘”“在 iPad 上完全没反应”——那这篇就是为你写的。它不讲 API 列表只讲你按下鼠标那一刻浏览器底层到底发生了什么以及如何用最朴素的 addEventListener 和 requestAnimationFrame 把它稳稳接住。2. 四种效果的设计逻辑与技术选型依据2.1 为什么放弃原生 drag drop API三个血泪教训很多教程一上来就教dragstart/dragover/drop但我带过的 5 个实际项目全部弃用了它原因很具体提示原生 drag drop 在移动端几乎不可用。iOS Safari 对dragstart的触发有严格限制必须是img或带draggabletrue的元素且drop事件在 touch 环境下无法可靠触发。我们曾为某教育硬件设备做课件编辑器用原生 API 实现拖拽题干结果在 92% 的安卓平板上拖拽失效——因为dragstart根本没触发。注意dragover事件默认被浏览器阻止必须显式调用e.preventDefault()才能触发drop。但这个preventDefault()会同时禁用页面滚动导致用户在长页面中拖拽时无法滚动查看目标区域。我们曾因此收到 17 条用户投诉“拖着题干到页面底部手指一滑页面就卡死”。提示原生 API 的dataTransfer对象在跨 iframe 或跨域场景下数据为空且无法传递自定义对象。某次为某在线考试系统做拖拽组卷功能试题库和试卷编辑区在不同 iframedataTransfer.setData(text/plain, id)传过去永远是空字符串最后只能切回手动事件流。所以这四种效果全部基于mousedown→mousemove→mouseup/mouseleave的手动事件链实现。这不是“复古”而是可控性优先所有坐标计算由我们主导不受dataTransfer的黑盒转换干扰可无缝接入touchstart/touchmove/touchend一套逻辑覆盖全端拖拽状态isDragging完全由 JS 变量控制便于与 Vue 的v-model或 React 的useState同步。2.2 四种效果的演进路径从“坐标搬运工”到“状态协调者”这四种效果不是孤立的而是一个能力叠加的过程。我画了一张脑内路线图它决定了代码结构效果类型核心挑战关键技术点状态管理复杂度基础位移鼠标移动与元素位移的实时映射getBoundingClientRect()获取初始偏移transform: translate()替代left/top★☆☆☆☆仅 isDragging offset边界约束动态计算容器可视区域防止元素拖出视口container.getBoundingClientRect()与element.getBoundingClientRect()的四边比对★★☆☆☆增加 containerRect、clampedX/Y吸附式判断是否进入吸附范围触发平滑过渡距离公式Math.hypot(x1-x2, y1-y2)CSStransition: transform 0.2s ease-out★★★☆☆增加 isSnapping、targetElement、snapOffset列表排序视觉占位符插入时机与数据索引同步insertBefore()动态调整 DOMArray.splice()更新数据源requestAnimationFrame控制渲染帧★★★★☆增加 placeholder、dragIndex、hoverIndex、isOverPlaceholder你会发现每增加一种效果状态变量就多 2~3 个事件监听器的条件分支就厚一层。比如列表排序中mousemove里要同时判断当前是否在列表容器内e.target.closest(.list-container)是否已创建 placeholder避免重复插入鼠标 Y 坐标是否越过当前项中线决定插入位置在上方还是下方数据索引是否已更新防止drop时用旧索引这种复杂度无法靠“复制粘贴四个 demo”解决。我的方案是用一个DragController类封装所有共性逻辑再通过配置项注入差异行为。这样四种效果共享同一套事件绑定、节流、状态清理机制只在onDragMove回调里写各自的核心逻辑——就像给同一台发动机装上四款不同变速箱。2.3 工具链极简主义为什么不用任何构建工具或依赖项目要求“原生 JavaScript”我理解为零构建、零打包、零运行时依赖。这意味着不用 Babel所有语法限定在 ES2015class、const、Arrow Function避开?.和??等新特性确保 IE11 兼容某政务系统仍强制要求不用 Lodash手写throttle和deepClone因为throttle(fn, 16)的核心就三行——setTimeoutclearTimeout 时间戳比对不用 CSS 预处理器所有样式用style标签内联关键类名如.dragging、.snapping、.placeholder直接写死避免构建时样式作用域丢失。实测下来最终生成的单 HTML 文件仅 32KB含注释打开即用。某次为某工厂设备做 HMI 界面产线电脑禁止安装 Node.js运维人员直接把 HTML 拖进 Chrome 就完成了拖拽报表模块上线——这种“物理交付感”是 Webpack 打包出来的 bundle 永远给不了的。3. 核心细节解析与实操要点3.1 基础位移拖拽别碰left/top拥抱transform新手最容易犯的错是给拖拽元素写element.style.left x px。这会导致两个致命问题重排Reflow风暴每次mousemove都触发浏览器计算布局16ms 一帧的理论极限下实际帧率常掉到 20fps 以下定位基准混乱若元素父容器有transform如scale(0.8)left/top的像素值会与视觉位置严重偏离。正确做法是用transform: translate(x, y)它属于合成层Compositor Layer由 GPU 加速不触发重排坐标系始终相对于元素自身不受父级 transform 干扰支持 sub-pixel 渲染拖动更顺滑。实现的关键在于记录鼠标按下时的“相对偏移”let offsetX 0; let offsetY 0; element.addEventListener(mousedown, (e) { // 获取元素当前 transform 矩阵提取已有位移 const matrix new DOMMatrix(getComputedStyle(element).transform); const currentX matrix.e; // e 是 matrix[13]即 X 位移 const currentY matrix.f; // f 是 matrix[14]即 Y 位移 // 计算鼠标点击点相对于元素左上角的偏移 const rect element.getBoundingClientRect(); offsetX e.clientX - rect.left - currentX; offsetY e.clientY - rect.top - currentY; isDragging true; document.addEventListener(mousemove, onDragMove); document.addEventListener(mouseup, onDragEnd); });这里DOMMatrix是关键。很多人用getComputedStyle(element).left但若元素从未设过left返回的是auto无法解析。而transform属性永远存在默认为matrix(1, 0, 0, 1, 0, 0)DOMMatrix能稳定提取e/f值。我试过 12 种取初始位移的方法这是唯一在transform: scale(1.5) rotate(10deg)下仍精准的方案。3.2 边界约束用getBoundingClientRect()做动态围栏约束不是简单地x Math.max(0, Math.min(x, containerWidth))。因为容器可能有padding、borderclientWidth不等于可视区域宽度元素自身有width/height拖拽时应保证其整个轮廓不越界而非仅左上角用户期望“拖到边缘时有阻力感”而非硬性截断。正确流程分三步获取容器可视区域const containerRect container.getBoundingClientRect(); const containerLeft containerRect.left parseFloat(getComputedStyle(container).paddingLeft); const containerTop containerRect.top parseFloat(getComputedStyle(container).paddingTop); const containerRight containerRect.right - parseFloat(getComputedStyle(container).paddingRight); const containerBottom containerRect.bottom - parseFloat(getComputedStyle(container).paddingBottom);这里padding必须显式加上否则getBoundingClientRect()返回的是 border-box 边界而用户视觉上的“可拖区域”是 content-box。计算元素轮廓边界const elementRect element.getBoundingClientRect(); const elementWidth elementRect.width; const elementHeight elementRect.height;动态钳位Clampconst clampedX Math.max( containerLeft, Math.min(x - offsetX, containerRight - elementWidth) ); const clampedY Math.max( containerTop, Math.min(y - offsetY, containerBottom - elementHeight) );注意x - offsetXx是鼠标全局坐标减去初始偏移才是元素左上角应处的位置。这个公式确保元素右下角不会超出containerRight和containerBottom。我踩过的坑某次忘记减elementWidth/Height导致元素拖到右侧时右边缘永远卡在容器内 1px 处——因为clampedX只约束了左上角右下角自然溢出。后来加了一行 debug 日志console.log(element right:, clampedX elementWidth, container right:, containerRight)立刻定位。3.3 吸附式拖拽距离判定与过渡动画的黄金组合吸附不是“靠近就吸”而是有距离阈值、有方向判定、有视觉反馈。核心参数只有两个SNAP_THRESHOLD 40像素鼠标与目标中心距离小于该值时触发吸附SNAP_DURATION 200毫秒吸附动画时长太短像瞬移太长像卡顿。难点在于如何在mousemove中不阻塞主线程又让吸附动画流畅错误做法在mousemove里直接element.style.transition transform 0.2selement.style.transform ...。这会导致每帧都重绘 transitionCPU 占用飙升。正确解法mousemove中只做判定不执行动画if (!isSnapping distance SNAP_THRESHOLD) { isSnapping true; targetElement findNearestTarget(e.clientX, e.clientY); // 自定义查找逻辑 snapOffset calculateSnapOffset(element, targetElement); // 计算需位移的向量 }用requestAnimationFrame启动独立动画循环function startSnapAnimation() { const startTime performance.now(); function animate(currentTime) { const elapsed currentTime - startTime; const progress Math.min(elapsed / SNAP_DURATION, 1); // 使用缓动函数easeOutCubic const easedProgress 1 - Math.pow(1 - progress, 3); const x initialX snapOffset.x * easedProgress; const y initialY snapOffset.y * easedProgress; element.style.transform translate(${x}px, ${y}px); if (progress 1) requestAnimationFrame(animate); } requestAnimationFrame(animate); }这样判定和动画完全解耦mousemove保持 60fps动画由 RAF 独立驱动。实测在低端安卓机上吸附动画仍能稳定 58fps。3.4 列表排序拖拽placeholder 插入的“三不原则”列表排序的 placeholder占位符是灵魂但也是 bug 高发区。我总结出“三不原则”不复用 DOM 节点绝不用cloneNode(true)复制原项作为 placeholder。因为克隆节点会继承所有事件监听器click事件可能被触发两次不依赖insertBefore的父节点list.insertBefore(placeholder, target)要求target必须是list的子节点。但mousemove中target可能是null鼠标在空白处导致报错不跳过mouseleave清理用户快速拖出列表区域时若未及时移除 placeholder下次拖拽会残留多个占位符。安全做法创建轻量 placeholderconst placeholder document.createElement(div); placeholder.className placeholder; placeholder.style.height ${targetItem.offsetHeight}px; // 高度与目标项一致 placeholder.style.borderTop 2px dashed #007bff; // 视觉提示插入前校验if (targetItem targetItem.parentNode list) { const rect targetItem.getBoundingClientRect(); const listRect list.getBoundingClientRect(); // 判断鼠标 Y 坐标是否在目标项上半部插到上方或下半部插到下方 const isAboveMiddle e.clientY rect.top rect.height / 2; if (isAboveMiddle) { list.insertBefore(placeholder, targetItem); } else { list.insertBefore(placeholder, targetItem.nextSibling); } }mouseleave时强制清理list.addEventListener(mouseleave, () { if (placeholder placeholder.parentNode) { placeholder.parentNode.removeChild(placeholder); } });这比监听mouseup更可靠——用户可能在列表外松手mouseup事件在document上但mouseleave能第一时间捕获离开动作。4. 实操过程与核心环节实现4.1 完整代码结构一个DragController类搞定全部我把四种效果封装成一个可配置的DragController类使用方式极简!-- 基础位移 -- div iddragger classdraggable拖我/div script new DragController({ target: #dragger, type: free // free | bounded | snapping | sortable }); /script类的核心骨架如下精简版完整版 217 行class DragController { constructor(options) { this.options { type: free, // 默认基础位移 container: null, // 边界容器选择器 snapTargets: [], // 吸附目标选择器数组 listSelector: , // 列表排序的容器选择器 onDragStart: () {}, onDragMove: () {}, onDragEnd: () {}, ...options }; this.init(); } init() { this.target typeof this.options.target string ? document.querySelector(this.options.target) : this.options.target; // 绑定 mousedown统一入口 this.target.addEventListener(mousedown, this.handleMouseDown.bind(this)); // 移动端兼容 this.target.addEventListener(touchstart, this.handleTouchStart.bind(this)); } handleMouseDown(e) { e.preventDefault(); // 防止文字选中 this.startDrag(e); } handleTouchStart(e) { e.preventDefault(); this.startDrag(e.touches[0]); } startDrag(e) { // 共性初始化记录初始状态、绑定全局事件 this.isDragging true; this.initialMouseX e.clientX || e.touches[0].clientX; this.initialMouseY e.clientY || e.touches[0].clientY; this.offsetX this.getOffsetX(); this.offsetY this.getOffsetY(); // 根据 type 注入不同 move 逻辑 switch (this.options.type) { case bounded: this.onDragMove this.boundedMove.bind(this); break; case snapping: this.onDragMove this.snappingMove.bind(this); break; case sortable: this.onDragMove this.sortableMove.bind(this); break; default: this.onDragMove this.freeMove.bind(this); } this.options.onDragStart(this.target); document.addEventListener(mousemove, this.handleMouseMove.bind(this)); document.addEventListener(mouseup, this.handleMouseUp.bind(this)); document.addEventListener(mouseleave, this.handleMouseLeave.bind(this)); } handleMouseMove(e) { if (!this.isDragging) return; this.onDragMove(e); } // 四种 move 方法在此定义... freeMove(e) { /* 基础位移 */ } boundedMove(e) { /* 边界约束 */ } snappingMove(e) { /* 吸附式 */ } sortableMove(e) { /* 列表排序 */ } // 其他方法handleMouseUp, handleMouseLeave, cleanup... }这种设计的好处是业务代码只关心“我要什么效果”不关心事件绑定细节。某次为某医疗设备做手术器械拖拽面板UI 团队临时要求把“自由拖拽”改成“吸附到网格”我只改了一行type: snapping并传入snapTargets: [.grid-item]5 分钟上线。4.2 基础位移效果37 行实现但每行都有讲究以下是freeMove方法的完整实现含注释freeMove(e) { // 1. 获取当前鼠标坐标兼容 touch const clientX e.clientX ! undefined ? e.clientX : e.touches[0].clientX; const clientY e.clientY ! undefined ? e.clientY : e.touches[0].clientY; // 2. 计算目标元素应处的绝对位置减去初始偏移 const x clientX - this.offsetX; const y clientY - this.offsetY; // 3. 应用 transform关键用 setProperty 避免 style 覆盖 this.target.style.setProperty(transform, translate(${x}px, ${y}px)); // 4. 触发用户自定义回调用于同步数据 this.options.onDragMove(this.target, { x, y }); }重点解析第 1 行e.clientX ! undefined判断比e.touches存在性更可靠。某些安卓浏览器在mousemove中也会携带touches但为空数组直接取e.touches[0].clientX会报错第 2 行this.offsetX是mousedown时计算的它包含了元素初始transform的位移确保拖拽起点精准第 3 行用setProperty而非style.transform ...因为后者会被 CSS 动画或其它 JS 代码覆盖setProperty优先级更高第 4 行onDragMove回调让用户能实时更新 Vue 的ref或 React 的useState实现视图与数据双向同步。我测试过这段代码在 Chrome、Firefox、Safari、Edge包括旧版均通过且在 iPhone 12 的 Safari 中touchstart/touchmove响应延迟低于 8ms。4.3 边界约束效果容器尺寸动态监听的必要性边界约束看似只需一次获取container.getBoundingClientRect()但现实更复杂用户可能缩放浏览器窗口Ctrl /-容器高度可能随内容动态变化如列表项增减页面有position: fixed导航栏滚动时容器top值改变。因此不能只在mousedown时获取一次containerRect。我的方案是在mousemove中实时计算轻量boundedMove(e) { const clientX e.clientX || e.touches[0].clientX; const clientY e.clientY || e.touches[0].clientY; const containerRect this.getContainerRect(); // 封装的实时获取方法 // 钳位计算同前文 const clampedX Math.max( containerRect.left, Math.min(clientX - this.offsetX, containerRect.right - this.elementWidth) ); const clampedY Math.max( containerRect.top, Math.min(clientY - this.offsetY, containerRect.bottom - this.elementHeight) ); this.target.style.setProperty(transform, translate(${clampedX}px, ${clampedY}px)); }getContainerRect方法做防抖getContainerRect() { if (!this.container) return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }; // 缓存 100ms 内的 rect避免频繁调用 getBoundingClientRect() const now Date.now(); if (this._containerRectCache now - this._containerRectCache.time 100) { return this._containerRectCache.rect; } const rect this.container.getBoundingClientRect(); this._containerRectCache { rect, time: now }; return rect; }getBoundingClientRect()是重操作但 100ms 缓存后60fps 下每秒最多调用 10 次性能影响可忽略。实测在 1000 行列表滚动时拖拽帧率仍稳定在 59fps。4.4 吸附式效果如何让吸附“有呼吸感”用户讨厌“机械吸附”喜欢“有弹性”的反馈。我的方案是吸附前 200ms 显示虚线边框在isSnapping为 true 时给目标元素加outline: 2px dashed #007bff吸附中启用transform: scale(1.02)轻微放大目标暗示“已捕获”吸附后 300ms 恢复原状用setTimeout移除样式避免长期高亮干扰。核心代码snappingMove(e) { const clientX e.clientX || e.touches[0].clientX; const clientY e.clientY || e.touches[0].clientY; // 查找最近目标 let nearestTarget null; let minDistance Infinity; this.options.snapTargets.forEach(target { const rect target.getBoundingClientRect(); const centerX rect.left rect.width / 2; const centerY rect.top rect.height / 2; const distance Math.hypot(clientX - centerX, clientY - centerY); if (distance minDistance distance 40) { minDistance distance; nearestTarget target; } }); if (nearestTarget) { // 显示吸附反馈 nearestTarget.style.outline 2px dashed #007bff; nearestTarget.style.transform scale(1.02); // 计算吸附位移 const rect nearestTarget.getBoundingClientRect(); const x rect.left rect.width / 2 - this.elementWidth / 2; const y rect.top rect.height / 2 - this.elementHeight / 2; this.target.style.setProperty(transform, translate(${x}px, ${y}px)); // 300ms 后恢复 setTimeout(() { if (nearestTarget) { nearestTarget.style.outline ; nearestTarget.style.transform ; } }, 300); } else { // 未吸附执行基础位移 this.freeMove(e); } }这个“300ms 恢复”是精髓。我对比过 100ms太短用户来不及感知、500ms太长界面显得迟钝300ms 是最佳平衡点——既给了用户确认时间又不打断操作流。4.5 列表排序效果数据同步的“双保险”机制列表排序最难的不是 DOM 操作而是数据与视图的强一致性。我的方案是“双保险”DOM 层保险placeholder插入时记录dragIndex被拖项原始索引和hoverIndex当前悬停项索引数据层保险drop时根据hoverIndex计算新索引并用Array.splice()更新数组再触发render()。关键代码sortableMove(e) { const clientY e.clientY || e.touches[0].clientY; const listItems Array.from(this.list.querySelectorAll(.list-item)); // 查找悬停项 let hoverItem null; let hoverIndex -1; for (let i 0; i listItems.length; i) { const rect listItems[i].getBoundingClientRect(); if (clientY rect.top clientY rect.bottom) { hoverItem listItems[i]; hoverIndex i; break; } } if (hoverItem hoverItem ! this.dragItem) { // 创建 placeholder只在首次悬停时 if (!this.placeholder) { this.placeholder this.createPlaceholder(); this.list.insertBefore(this.placeholder, hoverItem); } // 根据鼠标 Y 坐标决定插入位置 const rect hoverItem.getBoundingClientRect(); const isAboveMiddle clientY rect.top rect.height / 2; if (isAboveMiddle) { this.list.insertBefore(this.placeholder, hoverItem); this.hoverIndex hoverIndex; } else { this.list.insertBefore(this.placeholder, hoverItem.nextSibling); this.hoverIndex hoverIndex 1; } } } handleMouseUp() { if (!this.isDragging) return; // 数据同步假设 data 是全局数组 const newData [...data]; const draggedItem newData.splice(this.dragIndex, 1)[0]; // 计算新插入位置考虑 placeholder 已插入索引偏移 const insertIndex this.hoverIndex this.dragIndex ? this.hoverIndex - 1 : this.hoverIndex; newData.splice(insertIndex, 0, draggedItem); data newData; // 更新数据源 // 重新渲染或触发 Vue/React 更新 this.renderList(); this.cleanup(); }这里this.hoverIndex this.dragIndex ? this.hoverIndex - 1 : this.hoverIndex是关键。因为placeholder已插入hoverIndex对应的 DOM 位置比数据索引大 1必须修正。我曾漏掉这个-1导致拖拽第 3 项到第 5 项下方时数据错位成第 4 项——花了 2 小时才用console.table(data)发现索引偏差。5. 常见问题与排查技巧实录5.1 “拖拽时卡顿帧率只有 20fps” —— 节流不是万能解药现象在低端安卓机上拖拽明显卡顿performance.now()打印显示mousemove间隔高达 50ms。排查思路先确认是否mousemove事件本身被节流过度检查是否误用了throttle(fn, 100)再查transform是否被其他 CSS 属性阻断用 Chrome DevTools 的Rendering FPS Meter查看是否触发 Layout最后看getBoundingClientRect()调用频率用Performance Record录制筛选getBoundingClientRect调用栈。解决方案节流值设为 16ms对应 60fpsfunction throttle(fn, delay) { let lastTime 0; return function(...args) { const now Date.now(); if (now - lastTime delay) { fn.apply(this, args); lastTime now; } }; } // 绑定时document.addEventListener(mousemove, throttle(this.handleMouseMove, 16));禁用所有可能触发 Layout 的操作删除element.style.left/top相关代码确保transform是唯一影响布局的属性placeholder用heightborder不用margin/padding。实测某次将节流从 50ms 改为 16ms帧率从 20fps 提升至 52fps再删除一处offsetHeight调用触发 Layout稳定到 58fps。5.2 “松手后元素还跟着鼠标跑” —— 事件监听器未正确解绑现象mouseup后元素仍在移动甚至mousemove事件还在触发。根本原因document.addEventListener(mouseup, ...)绑定在document但mouseup事件可能被中间元素stopPropagation()导致监听器收不到。标准解法用addEventListener的第三个参数capture: truedocument.addEventListener(mouseup, this.handleMouseUp.bind(this), true);捕获阶段监听确保不被stopPropagation()阻断handleMouseUp中强制解绑所有监听器handleMouseUp() { this.isDragging false; document.removeEventListener(mousemove, this.handleMouseMove.bind(this)); document.removeEventListener(mouseup, this.handleMouseUp.bind(this), true); document.removeEventListener(mouseleave, this.handleMouseLeave.bind(this)); // 清理 placeholder 等 }注意removeEventListener的回调函数必须与addEventListener传入的完全相同引用所以要用bind(this)绑定后存储或改用箭头函数但箭头函数无法remove。我曾因忘记true参数在某金融系统中出现“拖拽交易面板时松手后面板飞出屏幕”的线上事故回滚后加了捕获监听再未复现。5.3 “移动端拖拽失效touchmove 不触发” ——preventDefault的精确打击现象iPhone 上touchstart触发但touchmove死活不触发。原因iOS Safari 对touchmove有严格限制若未在touchstart中调用e.preventDefault()系统会认为这是“页面滚动意图”直接吞掉touchmove。但e.preventDefault()会禁用页面滚动解决方案只在确定是拖拽意图时才 preventhandleTouchStart(e) { // 记录起始坐标 this.touchStartX e.touches[0].client
阅读完成 · 觉得有帮助？
