drag and drop组件拖拽时自动出现opacity gradient的问题解决

这个渐变效果是浏览器默认的拖拽预览样式导致的，当拖拽元素尺寸较大时，浏览器会自动添加渐变优化视觉体验，可通过以下两种方法彻底移除：

方法一：自定义拖拽预览（推荐） #

通过setDragImage方法用完全透明的图像替换浏览器默认预览，从根源消除渐变：

修改dragstart事件处理代码：

document.addEventListener("dragstart", (e) => {
  e.target.classList.add("dragging");
  // 创建透明空图像作为拖拽预览
  const dragImage = document.createElement('img');
  dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  e.dataTransfer.setDragImage(dragImage, 0, 0);
});

方法二：CSS强制覆盖默认样式（部分浏览器生效） #

针对拖拽状态的元素，强制清除背景渐变并自定义透明度：

.item.dragging {
  opacity: 0.8; /* 按需调整，设为1则完全不透明 */
  background-color: white !important;
  background-image: none !important;
}

/* Firefox额外兼容处理 */
.item:-moz-drag-over {
  background-image: none !important;
}

完整代码示例 #

JavaScript #

const columns = document.querySelectorAll(".column");

document.addEventListener("dragstart", (e) => {
  e.target.classList.add("dragging");
  // 自定义透明拖拽预览
  const dragImage = document.createElement('img');
  dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  e.dataTransfer.setDragImage(dragImage, 0, 0);
});

document.addEventListener("dragend", (e) => {
  e.target.classList.remove("dragging");
});

columns.forEach((item) => {
  item.addEventListener("dragover", (e) => {
    const dragging = document.querySelector(".dragging");
    const applyAfter = getNewPosition(item, e.clientY);

    if (applyAfter) {
      applyAfter.insertAdjacentElement("afterend", dragging);
    } else {
      item.prepend(dragging);
    }
  });
});

function getNewPosition(column, posY) {
  const cards = column.querySelectorAll(".item:not(.dragging)");
  let result;

  for (let refer_card of cards) {
    const box = refer_card.getBoundingClientRect();
    const boxCenterY = box.y + box.height / 2;

    if (posY >= boxCenterY) result = refer_card;
  }

  return result;
}

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins';
  font-size: 30px;
}

.kanban {
  display: flex;
  justify-content: center;
  min-height: 400px;
  gap: 10px;
  padding: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: cadetblue;
  min-width: 500px;
  border-radius: 5px;
}

.item {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.item.dragging {
  opacity: 0.8; /* 按需调整透明度 */
  background-image: none !important;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kanban</title>

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="kanban">
    <div class="column">
      <div class="item" draggable="true">Card 01</div>
      <div class="item" draggable="true">Card 02</div>
    </div>
    <div class="column">
      <div class="item" draggable="true">Card 03</div>
      <div class="item" draggable="true">Card 04</div>
    </div>
    <div class="column">
      <div class="item" draggable="true">Card 05</div>
      <div class="item" draggable="true">Card 06</div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

说明 #

• 方法一的自定义预览是最可靠的解决方案，所有主流浏览器均支持，完全规避浏览器默认样式。
• 方法二的CSS覆盖仅在部分浏览器中生效，适合快速测试，建议优先使用方法一。

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