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

Question

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

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

这是我的代码:

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>

Answer 1

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

避免在元素周围显示背景边框，使用 setDragImage 设置，方法是将元素定位在当前视口(viewport)之外，例如

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

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