带有 HTML“可拖动”的圆角

Question

我正在使用“draggable”属性，发现并非所有浏览器在拖动元素时都以相同的方式呈现元素。 具体来说，背景颜色有时取自父元素（例如 Chromium 33），有时使用白色（例如 Firefox 28）。

 <div style="background-color: #79a; padding: 4px;"> <div style="border-radius: 12px; padding: 12px; background-color: #ead;" draggable='true' ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> <p>Some content here that should have clean rounded corners while being dragged</p> </div> </div>

请参阅上面的http://jsfiddle.net/pZv35/3/ 。

有没有办法（最好使用 CSS）来缓解这个问题？

Answer 1

更新修复。 疼痛...

希望这会对某人有所帮助。 解决方案来自react-dnd github。

添加transform: translate(0, 0); 到您希望拖动作为预览的节点。

JS 中的 CSS： transform: 'translate(0, 0)'

从这里解决。

Answer 2

这在 Chrome (71) 中仍然存在。 我发现这可以通过为可拖动元素设置不透明度来解决。 如果你不想要不透明度，你可以设置opacity: 0.999; 来解决这个问题。

解决方案： https : //jsfiddle.net/8ro46wf7/

Answer 3

对于图像，这在当今的 Chrome 中对我不起作用。 我发现这个答案适用于图像。

这是我今天工作的代码：

在 CSS 中：

.content {
  background: url('') top left no-repeat;
  overflow: hidden;
  opacity: 0.999;
  border-radius: 50%;
}  

在 html 中：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="drag1" class="content" style="background:url('##POPULATED PROGRAMMATICALLY##');
   height:144px; width:144px;" draggable="true" ondragstart="drag(event)"> </div>
</div>

Answer 4

添加position: relative; .inner修复此问题，如下所示： http : //jsfiddle.net/pZv35/4/

编辑：我将其更新为包含opacity: 0.999 ，根据下面的 Rutger 解决方案： https : //jsfiddle.net/vzcbng7w/8/