原生HTML5拖拽CSS scale缩放元素时缩放效果丢失如何解决

问题场景 #

开发支持元素拖放操作的面板时，为适配小屏幕尺寸、减少冗余计算，常会对面板本身或面板内对象应用CSS缩放效果。
使用原生HTML draggable 属性实现拖拽功能时，被transform: scale()缩放的元素在拖拽过程中，默认生成的拖拽预览会恢复元素原始全尺寸显示，和元素实际缩放后的尺寸不符，导致用户无法准确预判元素最终放置效果。
以将蓝色方块缩放为原尺寸1/2的场景为例，静态状态下元素显示为原尺寸的一半，触发拖拽后预览会恢复为原始大小。

复现代码 #

HTML结构

<div id="container">
    <div id="dragging" draggable="true"></div>
</div>

CSS样式

#container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
#dragging {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(.5);
}

可行解决方案 #

提示：浏览器自动生成的默认拖拽预览节点由原生渲染、不存在于常规DOM树中，无法通过CSS选择器选中修改，不要尝试直接给原生预览追加样式修复。

浏览器原生拖拽生成的默认预览图不会继承元素的transform缩放属性，可通过以下两种方式实现预览和缩放后尺寸一致：

• 自定义拖拽预览（推荐）
  监听元素的dragstart事件，手动克隆目标元素生成和缩放后样式完全一致的临时节点，通过原生拖拽API提供的dataTransfer.setDragImage()方法指定该临时节点为拖拽预览即可。
  注意临时节点需要先插入到DOM树中才能被识别为预览图，可将其定位到视口外避免页面闪烁，同时要根据元素实际缩放比例调整预览的锚点偏移值，避免鼠标和预览位置错位，拖拽结束后及时移除临时节点。
  核心实现代码：

  const dragElement = document.getElementById('dragging')
  dragElement.addEventListener('dragstart', (e) => {
    // 克隆元素生成预览节点
    const dragPreview = dragElement.cloneNode(true)
    // 将预览节点放到视口外，避免影响页面显示
    dragPreview.style.cssText = 'position: fixed; left: -9999px; top: -9999px;'
    document.body.appendChild(dragPreview)
  
    // 计算元素实际缩放比例：元素渲染后的实际宽 / 元素本身设置的宽
    const actualScale = dragElement.getBoundingClientRect().width / dragElement.offsetWidth
    // 设置自定义预览，锚点偏移按缩放比例换算，避免错位
    e.dataTransfer.setDragImage(dragPreview, e.offsetX * actualScale, e.offsetY * actualScale)
  
    // 拖拽结束后清理临时预览节点
    const clearPreview = () => {
      dragPreview.remove()
      dragElement.removeEventListener('dragend', clearPreview)
    }
    dragElement.addEventListener('dragend', clearPreview)
  })
  

• 直接修改元素尺寸替代transform缩放
  浏览器默认拖拽预览会直接读取元素的宽高属性生成，如果放弃使用transform: scale()，改为直接根据缩放比例修改元素的width、height，以及内部子元素的尺寸、字体、间距等属性，默认生成的拖拽预览就会和元素显示尺寸完全一致。这种方式不需要额外写JS逻辑，但需要递归计算所有子元素的样式值，计算量更高，适合元素结构简单的场景使用。

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