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

Question

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

3

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

我面临的问题是，我正在尝试拖放的圆形元素周围有一个方形背景。如何删除它并使得在从调色板中拖动该元素时只出现圆形？

以下是我的代码：

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>

- Mohit Jain

1

@OmarEinea 我已经批准了你的编辑，除了将colour更正为color。Colour是正确的拼写，这是英国人的写法，而color则是美国人的写法，所以我保留了colour。 - undefined

只有当<body>的背景颜色是白色，并且所有其他的div都是透明的时候，它才起作用。可能不完全符合您的要求，因为整个文档都会是白色的，但至少在拖动时您不会有背景。 - undefined

示例代码无法正常工作。你是否也尝试过jQuery的可拖动插件？ - undefined

@JeremyThille - 背景颜色是白色。我想要一个带有黑色背景的div，其中所有可拖动的元素都排列整齐。因此，包含可拖动元素的div必须与body的颜色不同。 - undefined

身体不是白色的。你的CSS清楚地声明：body{ background : #242424; }，几乎是黑色的。你说“我想要一个带有黑色背景的div”，但在你的示例中，该div具有白色背景。下定决心吧。 - undefined

对不起，我的意思是我希望主体部分是深灰色 #242424，而包含所有可拖动元素的 div 具有白色背景 #fff。就像示例中给出的那样。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- holmberd · Answer 1

可拖动元素的背景“盒子”颜色将取决于页面背景颜色以及其在视口中的位置。

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

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

确保在你的dragEnd事件处理程序中移除元素。