React DnD 如何让拖拽预览仅显示被拖拽元素、隐藏后方背景内容？

可以实现该需求，主流实现方案共两种，具体实现逻辑和代码如下：

方案一：自定义拖拽预览（最推荐，无页面视觉闪烁问题） #

原理是在dragstart事件触发时，手动创建仅包含当前拖拽元素的临时DOM节点，将该临时节点指定为拖拽预览，拖拽事件结束后自动销毁临时节点，完全不会影响原有页面布局和展示。
示例代码：

// 替换为你自己的可拖拽absolute元素选择器
const draggableEle = document.querySelector('.draggable-box');

draggableEle.addEventListener('dragstart', (e) => {
  // 克隆当前拖拽元素，仅保留自身样式，不会携带父级背景内容
  const dragPreview = draggableEle.cloneNode(true);
  // 将临时预览节点移出可视区域，避免在页面上额外展示
  dragPreview.style.position = 'absolute';
  dragPreview.style.top = '-1000px';
  dragPreview.style.left = '-1000px';
  document.body.appendChild(dragPreview);
  // 指定自定义预览，后两个参数为鼠标相对预览图的偏移量，可按需调整
  e.dataTransfer.setDragImage(dragPreview, 10, 10);
  // 拖拽事件触发后立即销毁临时节点
  setTimeout(() => {
    document.body.removeChild(dragPreview);
  }, 0);
});

方案二：拖拽时临时隐藏背景元素 #

如果不想自定义拖拽预览，可以在拖拽触发的瞬间临时隐藏背景元素，拖拽结束后再恢复显示，注意不要使用display: none，会影响拖拽元素的布局定位。
示例代码：

const draggableEle = document.querySelector('.draggable-box');
// 替换为你自己的背景元素选择器
const backgroundEle = document.querySelector('.background-img');

draggableEle.addEventListener('dragstart', () => {
  backgroundEle.classList.add('hide-during-drag');
});

draggableEle.addEventListener('dragend', () => {
  backgroundEle.classList.remove('hide-during-drag');
});

对应CSS样式：

.hide-during-drag {
  visibility: hidden;
  /* 也可替换为 opacity: 0，根据交互需求选择即可 */
}

注意事项 #

• 如果拖拽元素本身带有半透明属性，建议克隆预览节点时手动将其透明度设置为1，避免预览效果异常
• 低版本浏览器对setDragImage的兼容性有限，如需兼容IE等老旧浏览器优先选择第二种方案

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