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

Question

我正在尝试使用可拖动的圆形元素构建调色板，将其拖放到画布上。 调色板颜色不同于主体和画布背景。

我面临的问题是，我要拖放的圆形元素有方形背景。 当从面板中拖动元素时，如何删除它并使仅出现圆圈？

这是我的代码：

 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

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

通过将元素setDragImage在当前视口之外，避免使用setDragImage设置的元素周围显示背景边框。

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

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