HTML“可拖动”的圆角答案

【问题标题】：Rounded corners with HTML "draggable"HTML“可拖动”的圆角
【发布时间】：2014-05-20 07:21:29
【问题描述】：

我正在使用“可拖动”属性，发现并非所有浏览器在拖动元素时都以相同的方式呈现元素。具体来说，背景颜色有时取自父元素（例如 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）来缓解这个问题吗？

【问题讨论】：

您应该在发布问题之前让您的示例正常工作。 jQuery UI 没有被加载到你的小提琴中，所以问题不会在那里显示。
@matthew：draggable 属性不是 jQueryUI 属性，而是 HTML5 规范的一部分——支持它的浏览器允许原生拖动几乎任何元素：根本不需要 jQuery。小提琴奏效了。
我的错误。我不认为您可以在使用 HTML5 拖动元素时为其设置样式。

标签： css html draggable rounded-corners

【解决方案1】：

更新修复。疼痛...

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

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

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

来自here的解决方案。

【讨论】：

这个解决方案对我有用，但我还必须删除 box-shadow 以删除底角的不圆角效果。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

对于图像，这在当今的 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>

【讨论】：

【解决方案4】：

将position: relative; 添加到.inner 可以解决此问题，如下所示：http://jsfiddle.net/pZv35/4/

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

【讨论】：

效果很好。但为什么呢？
我怀疑这是 webkit 中的错误。大约一年前（现已修复）有一个类似的错误 (bugs.webkit.org/show_bug.cgi?id=108079) 提到可拖动元素的边框没有按预期工作。
@igor 你找到解决方案了吗？
@denski nope :(
@igor 我在下面的答案中删除了一个修复程序。