draggable="true"的div在Windows拖动后变色，如何保留原背景色？

针对Windows系统中设置了draggable="true"的div在拖动时出现渐变高亮、偏离原本颜色的问题，可以用以下两种方法解决：

• 方法一：用CSS覆盖拖动时的默认样式
  利用CSS的::drag伪元素，将拖动状态下的元素样式强制设置为和原元素一致，直接覆盖系统默认的渐变效果：

  div[draggable="true"]::drag {
    background-color: #你的原背景色;
    border: 你的原边框样式;
    /* 其他需要保持一致的样式，比如文字颜色、圆角等 */
  }
  

  这种方法简单直接，不需要额外的JS逻辑。

• 方法二：通过JS自定义拖动行为，规避系统默认效果
  在dragstart事件中阻止系统默认的拖动反馈，同时创建一个和原元素完全一致的克隆元素作为拖动代理，这样系统的渐变效果就不会作用在原元素上：

  const draggableDiv = document.querySelector('div[draggable="true"]');
  draggableDiv.addEventListener('dragstart', (e) => {
    // 阻止系统默认的拖动视觉反馈
    e.preventDefault();
    // 创建克隆元素
    const clone = draggableDiv.cloneNode(true);
    clone.style.position = 'fixed';
    clone.style.top = '-9999px';
    clone.style.left = '-9999px';
    document.body.appendChild(clone);
    // 将克隆元素设置为拖动数据
    e.dataTransfer.setDragImage(clone, 0, 0);
    // 拖动结束后移除克隆元素
    draggableDiv.addEventListener('dragend', () => {
      document.body.removeChild(clone);
    }, { once: true });
  });
  

  这种方法更灵活，适合需要自定义拖动视觉效果的场景。

内容的提问来源于stack exchange，提问作者吼嗒一