React-dnd: 问题：拖动圆角元素时如何使方角透明？

您是否为 DragPreview 使用 CustomDragLayer？ 出现方角
以及更圆的？

屏幕截图应该有助于了解发生了什么。

在周三，2017年6月7日在00:53 nottoseethesun [email protected]写道：

我有一个带圆角的可拖动元素，当它被拖动时，
元素的方角以浅灰色显示，不同
从元素的指定背景颜色。

我希望它消失，所以只有圆角的元素
出现。

有什么办法可以关闭它吗？ 比如与鬼
可能正在应用的图像？

—
您收到此消息是因为您订阅了此线程。
直接回复本邮件，在GitHub上查看
https://github.com/react-dnd/react-dnd/issues/788 ，或静音线程
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

问候，
加根

谢谢 - 不使用CustomDragLayer ； 一切都很简单。

在屏幕截图上，不幸的是不可能，但我可以更好地描述：可拖动是一个方形 div，每边大约一英寸，带有圆角（边框半径 10 像素）。 可拖动的，拖动时在所有方面看起来都很正常（它仍然有圆角和适当的颜色），除了一件事：四个非圆角中的每一个都出现，就像元素上没有边框半径圆角一样，除了未圆角部分的颜色是可拖动的父元素（拖动它的父元素）的颜色。 因此，每个圆角都令人不快地伴随着，仅在 Chrome 浏览器（不是 Firefox 或 Safari）上，带有一个小“帽子”，即 div 的其余表面积，就像没有圆角一样。

这几乎就像 Chrome 正在对 div 进行快照并将其保存在内存中。 早些时候，我实际上遇到了endDrag ，当我在桌面上的 Web 浏览器之外单击时，我可以像描述的那样看到可拖动对象。

我尝试将WebkitTapHighlightColor （React 标识符格式）设置为transparent ，但这并没有解决这个问题。

真奇怪。 如果您没有使用 CustomPreview，则完全相同
在开始拖动之前渲染的东西应该是预览（我们将
取决于元素的浏览器快照）

你能检查一下你是否在做任何超出描述的事情吗？
这个例子 -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ？

如果你克隆这个 repo 并在这个例子中添加一个 borderRadius，你会看到
它工作得很好！

在周三，2017年6月7日在09:19 nottoseethesun [email protected]写道：

谢谢 - 不使用 CustomDragLayer； 一切都很简单。

在屏幕截图上，不幸的是不可能，但我可以描述
更好：draggable 是一个方形 div，每边大约一英寸，带有
圆角（边框半径 10 像素）。 可拖动的，拖动时看起来
各方面都正常（它仍然有圆角和适当的颜色）
除了一件事：四个不圆角中的每一个都显示为
好吧，就像如果元素上没有边框半径四舍五入一样，
除了未圆角部分的颜色是父项的颜色
可拖动元素（拖动它的父元素）。 所以
每个圆角都有不愉快的陪伴，仅在 Chrome 浏览器上（不是
Firefox 或 Safari），还有一个小“帽子”，即表面的其余部分
div 的区域，因为它没有圆角。

就好像 Chrome 正在对 div 进行快照并将其保存在
记忆。 早些时候，我实际上在使用 endDrag 时遇到了问题
我在桌面上的网络浏览器之外单击，我可以看到
可拖动，正如描述的那样。

—
您收到此消息是因为您发表了评论。

直接回复本邮件，在GitHub上查看
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

问候，
加根

谢谢 - 我在那个例子中尝试了border-radius ，确实你是对的。 然而，它看起来正确的原因是整个工作区的背景颜色相同。 一旦 Chrome 中的 html 元素原生鬼图像被拖到不同的背景颜色上，这些角就会出现。 就我而言，我确实有这种情况。 可以通过指定重影图像成功解决它。

遇到了同样的问题。 最终通过将transform: 'translate(0, 0)'到我想要作为拖动预览的节点来修复它。 从这个页面得到了一些见解： https :

@douweknook 对此表示感谢。 寻找解决方案花费了大量时间。

@douweknook很棒的解决方案！

一个简单的 css 实现如下所示：

    .sortable-chosen {
        transform: translate(0, 0);
    }

我会将 .sortable-chosen 链接到您的 sortable 元素类，以确保该样式不是全局应用的。 例如，如果您的可排序元素类是“item”，则使用 .item.sortable-chosen 代替！

@douweknook YAY ......谢谢，即使在纯 javaScript 坦克中它也解决了问题

@douweknook你是一位绅士和学者。 这有助于修复边界半径问题，但它仍然会裁剪掉框阴影。 注意：这在 Firefox 中正常工作。

我为此创建了一个单独的问题，供任何感兴趣的人使用。 https://github.com/react-dnd/react-dnd/issues/2762