Question

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

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

这是我的代码：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

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

1 个答案: