如何避免HTML可拖拽元素拖出浏览器窗口时被缩小？

问题现象 #

在两个网页间实现拖放功能，已通过dataTransfer设置数据，核心功能正常，但在MacOS系统的Brave、Chrome、Edge和Firefox浏览器中，将元素拖出源DOM时，元素会大幅缩小；仅当行内元素过多导致整体宽度过大时才会触发该问题，Windows 11系统下元素尺寸可正常保持。

复现代码 #

JavaScript 代码 #

document.getElementById('test').addEventListener('dragstart', e => {
    e.dataTransfer.setData('resourceType', 'CLIENT');
    e.dataTransfer.setData('resourceId', '123');
});

HTML 代码 #

<table>
  <tbody>
    <tr draggable="true" id="test">
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td> 
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
    </tr>
  </tbody>
</table>

解决方法 #

问题根源是MacOS下浏览器默认的拖拽预览机制会对宽尺寸元素进行自动缩放处理，解决思路是自定义拖拽预览元素，通过dataTransfer.setDragImage()强制指定拖拽时显示的内容及尺寸，具体步骤：

1. 在dragstart事件中，复制原拖拽元素的结构和样式，创建一个临时的预览元素；
2. 将临时元素添加到DOM中（可设置为不可见，比如position: fixed; left: -9999px）；
3. 使用setDragImage()将这个临时元素设为拖拽预览；
4. 在dragend事件中移除临时元素，避免DOM冗余。

修改后的JavaScript代码如下：

document.getElementById('test').addEventListener('dragstart', e => {
    // 设置拖放数据
    e.dataTransfer.setData('resourceType', 'CLIENT');
    e.dataTransfer.setData('resourceId', '123');

    // 创建自定义预览元素
    const dragElement = e.target;
    const preview = dragElement.cloneNode(true);
    // 复制原元素的计算样式
    const computedStyle = window.getComputedStyle(dragElement);
    Object.assign(preview.style, {
        position: 'fixed',
        left: '-9999px',
        top: '-9999px',
        width: computedStyle.width,
        height: computedStyle.height,
        border: computedStyle.border,
        backgroundColor: computedStyle.backgroundColor
    });
    // 添加到DOM
    document.body.appendChild(preview);
    // 设置为拖拽预览
    e.dataTransfer.setDragImage(preview, 0, 0);

    // 存储预览元素引用，方便dragend时移除
    e.target._dragPreview = preview;
});

// 拖拽结束后清理临时元素
document.getElementById('test').addEventListener('dragend', e => {
    if (e.target._dragPreview) {
        document.body.removeChild(e.target._dragPreview);
        delete e.target._dragPreview;
    }
});

如果不需要完全复刻原元素样式，也可以直接创建一个包含原元素文本或简化结构的元素作为预览，只要指定固定尺寸即可避免缩放问题。

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