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）添加到要作为预览拖动的节点。

来自here的解决方案。

Answer 2

这在Chrome（71）中仍然没有解决。我发现可以通过为可拖动元素设置不透明度来解决此问题。如果您不希望出现不透明度，可以设置opacity: 0.999;来解决此问题。

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

Answer 3

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

Answer 4

对于图像，这在我现在的Chrome中不起作用。我发现this answer适用于图像。

这是我今天运行的代码：

在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>

带有HTML“draggable”的圆角

4 个答案: