如何删除可拖动 HTML 元素中的背景颜色？答案

【问题标题】：How do I remove background colour in a draggable HTML element?如何删除可拖动 HTML 元素中的背景颜色？
【发布时间】：2025-12-02 18:20:03
【问题描述】：

我正在尝试使用可拖动的圆形元素构建一个调色板，这些元素将被拖放到画布上。调色板颜色与正文和画布背景不同。

我面临的问题是我试图拖放的圆形元素有一个方形背景。从调色板中拖动元素时，如何删除它并只显示圆圈？

这是我的代码：

document.getElementById("drag-coveredup").addEventListener("dragstart", function (e) {
    var crt = this.cloneNode(true);
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 50px, 50px);
}, false);

body{
    background : #242424;
}
.dragdemo {
    width: 170px;
    height: 170px;
    line-height: 100px;
    text-align: center;
    border-radius: 50%;
    background: green;
    color: #efe;
}
.bgcolor{
    background : transparent;
}
.palette{
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
}

<div class ="palette">
  <div class="bgcolor">
    <div id="drag-coveredup" class="dragdemo" draggable="true">
      drag me
    </div>
  </div>
</div>

【问题讨论】：

@OmarEinea 仅供参考，我已批准您的编辑，但将 colour 更正为 color。 Colour 是正确的，这是英国的写法，color 是美国的，所以我留下了颜色。
如果<body>的背景颜色是白色并且所有其他div都是透明的，它就可以工作。不完全是您想要的，因为您的整个文档都是白色的，但至少在拖动时不会有背景。
示例代码不起作用。您是否也尝试过 jQuery 可拖动插件？
@JeremyThille - 身体背景是白色的。我想要一个黑色背景的 div，所有可拖动元素都排成一行。所以包含可拖动元素的 div 必须与 body 的颜色不同
身体是不是白色的。您的 CSS 明确说明：body{ background : #242424; }，几乎是黑色的。你说I want to have a div with black background 但在你的例子中，说 div 有白色背景。下定决心

标签： javascript html css draggable

【解决方案1】：

可拖动元素的背景“框”颜色将取决于主体背景颜色及其在视口中的位置。

避免在元素周围显示背景边框，设置为setDragImage，将元素定位在当前视口之外，例如

dragElem.style.position = "absolute";
dragElem.style.top = "-1000px";
document.body.appendChild(dragElem);
event.dataTransfer.setDragImage(dragElem, 0, 0);

确保在 dragEnd 事件处理程序中删除该元素。

【讨论】：