带有HTML"draggable"的圆角

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-dndgithub.将transform: 'translate(0, 0)'(JS中的CSS)添加到要作为预览拖动的节点.

从这里解决.

Answer 2

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

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

Answer 3

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

编辑：我更新了它以包含opacity: 0.999以下 Rutger 的解决方案： https: //jsfiddle.net/vzcbng7w/8/