原生拖拽中元素静止不动，transition无效；须禁用默认拖影，用mousemove/touchmove+transform手动更新位置，dragend时通过class切换触发归位动画。

拖拽中元素位置不更新，transition 完全失效？

直接给被拖拽元素加 transition: transform 0.2s 没用——因为浏览器原生拖拽（dragstart → dragover）不会自动更新该元素的 transform 或 left/top；它只是在拖拽阴影（drag image）上做位移，真实 DOM 元素静止不动。所以你看到的“没动画”，本质是没在动。

必须手动接管位置控制：禁用原生拖拽视觉反馈，改用 mousemove + transform 实时更新，并确保 transition 仅作用于非拖拽态的回弹或切换。

• 在 dragstart 中调用 e.dataTransfer.setDragImage(new Image(), 0, 0) 隐藏默认拖影
• 用 getBoundingClientRect() 或 pageX/Y 计算相对偏移，存为 dragOffset
• 在 mousemove 中实时设置 element.style.transform = translate(${x}px, ${y}px)
• transition 留给松手后（drop 或 dragend）的位置归位，而非拖拽过程本身

transform 动画卡顿？检查是否触发了重排

如果拖拽中用 left/top + transition，每次更新都会强制同步计算布局（layout），严重掉帧。必须只用 transform 和 opacity 这类合成属性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 确保元素有 will-change: transform（仅在拖拽开始时动态添加，结束时移除）
• 避免在拖拽过程中读取 offsetLeft、getComputedStyle 等会触发重排的 API
• 用 requestAnimationFrame 包裹 transform 更新，对齐刷新节奏
• 不要在 mousemove 里直接设 style.left，哪怕加了 transition 也无效且卡

松手后如何用 transition 平滑归位？

归位动画的关键是：松手瞬间把 transform 改为 translate(0, 0)，同时确保该元素此时没有 position: absolute 或其他干扰定位的样式覆盖。

• 在 dragend 或 drop 回调中，先清除内联 transform，再通过 class 切换触发 transition
• 推荐写法：

  .draggable { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }<br>.draggable.is-dragging { transition: none; }<br>.draggable.is-dropped { transform: translate(0, 0); }

• 注意：is-dropped 类需在 dragend 后异步添加（如 setTimeout(() => el.classList.add('is-dropped'), 0)），否则浏览器可能合并样式计算，跳过过渡

移动端 touch 事件怎么复用同一套逻辑？

不能只靠 dragstart，iOS 和多数安卓浏览器默认禁用非 a/img 的原生拖拽；必须监听 touchstart → touchmove → touchend，并阻止默认行为。

• 在 touchstart 中记录 touches[0].clientX/Y，计算初始偏移
• touchmove 中调用 e.preventDefault()（否则页面会滚动）
• 统一用 transform 更新，和鼠标逻辑完全一致
• 避免混用 pointer 事件——部分安卓 Chrome 对 pointermove 的节流过于激进，导致拖拽跳变

拖拽反馈动画真正的难点不在“怎么动”，而在“什么时候不该动”：拖拽中禁用 transition，归位时才启用；所有位置更新必须走合成属性，且避开任何隐式重排。漏掉其中一环，动画就会断帧或干脆不触发。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！