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>

请参见上面的链接。

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

- Thomas

---

在发布问题之前，您应该让您的示例代码能够正常运行。由于您的fiddle中没有加载jQuery UI，因此问题无法在那里显示。 - Matthew Darnell

@matthew：draggable属性不是jQueryUI的属性，而是HTML5规范的一部分 - 支持它的浏览器可以本地拖动几乎任何元素：完全不需要jQuery。这个小例子是有效的。 - Brian North

我的错误。我认为您无法在使用HTML5拖动元素时对其进行样式设置。 - Matthew Darnell

Answer 1

修正更新。真是让人头疼...

希望这可以帮助到有需要的人。解决方案来自于 react-dnd 的 github。

在你希望作为预览被拖动的节点上增加 transform: translate(0, 0);。

CSS in JS： transform: 'translate(0, 0)'

来自这里的解决方案。

- denski

---

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

哇，谢谢你！不然我可能要花很长时间才能弄明白这个问题！ - Fabian Omobono

根据上面的答案，我所需要添加的只是将 translate-x-0 添加到可拖动节点的 className。 - Morse

Answer 2

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

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

- Rutger Schimmel

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

- Joe T

Answer 4

在 .inner 中添加 position: relative; 可以解决这个问题，如此示例所示：http://jsfiddle.net/pZv35/4/

编辑：根据 Rutger 的解决方案，我更新了它，包括 opacity: 0.999：https://jsfiddle.net/vzcbng7w/8/

- goldins

---

工作得很好。但是为什么？ - Thomas

我怀疑这是 Webkit 的一个 bug。大约一年前有一个类似的 bug（https://bugs.webkit.org/show_bug.cgi?id=108079）被报告了（现在已经修复），提到可拖动元素的边框不能按预期工作。 - goldins

@igor，你找到解决方案了吗？ - denski

@denski 不是的 :( - igor

@igor 我在下面的回答中加入了一个修复。 - denski