如何避免拖拽Container时变为50%透明，保持全程完全不透明？

以下是不同场景下的解决方案：

HTML5原生拖拽 #

浏览器默认会生成半透明的拖拽预览元素，要解决这个问题可以通过以下两种方式：

• 自定义拖拽预览：在dragstart事件中，克隆当前Container并设置完全不透明，用它替换默认预览。

  const container = document.querySelector('.your-container');
  container.addEventListener('dragstart', (e) => {
    // 克隆容器并设置样式
    const dragPreview = container.cloneNode(true);
    dragPreview.style.opacity = '1';
    dragPreview.style.position = 'fixed';
    dragPreview.style.top = '-9999px';
    document.body.appendChild(dragPreview);
    // 设置自定义预览
    e.dataTransfer.setDragImage(dragPreview, e.offsetX, e.offsetY);
    // 拖拽结束后清理克隆节点
    container.addEventListener('dragend', () => document.body.removeChild(dragPreview), { once: true });
  });
  

• 覆盖拖拽状态样式：检查是否有拖拽时自动添加的类（比如dragging），强制设置不透明：

  .your-container.dragging {
    opacity: 1 !important;
  }
  

前端拖拽库（React DnD、Vue.Draggable等） #

这类库通常提供配置项控制拖拽预览：

• React DnD：使用useDrag钩子时，通过preview传入自定义组件并设置opacity: 1，或开启liveDrag模式直接使用原元素拖拽。
• Vue.Draggable：设置ghost-class为自定义类，确保该类的opacity: 1；或开启force-fallback禁用原生拖拽，使用库的自定义实现。

桌面端框架（Electron、Flutter） #

• Electron：放弃系统默认拖拽反馈，手动实现元素跟随鼠标移动，保持原元素opacity为1。
• Flutter：使用Draggable组件时，将feedback设为原Container的副本，确保副本opacity: 1，替换默认半透明反馈。

核心逻辑是：要么替换默认的半透明预览元素，要么强制覆盖拖拽状态下的opacity样式，确保全程不透明。

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