使用自定义拖动层的反应性可排序列表

Question

我使用与react-dnd的可排序示例类似的代码创建了一个简单的带有react-dnd的可排序列表：https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed

但是，在尝试概念化如何调整此示例并利用react-dnd的custom drag layer自定义拖动预览时，我遇到了一些困难。具体来说，我想在开始拖动组件以使其处于活动状态时更改其背景颜色。样式明智，没有什么太复杂的。

为什么我需要使用自定义拖动层？由于浏览器API和react-dnd的HTML5后端（这就是我正在使用的）的限制，我无法使用CSS设置拖动预览的样式。

我无法使用可排序列表中的自定义拖动层找到任何示例，因此将不胜感激。

Answer 1

当您将鼠标悬停在Card上时，可以添加CSS。不确定这是您所需要的...

import Radium from "radium";
import "./style.css";
const style = {
  border: "1px dashed gray",
  padding: "0.5rem 1rem",
  marginBottom: ".5rem",
  backgroundColor: "white",
  cursor: "move",
  ":hover": {
    background: "purple"
  }
};
export default Radium(Card);

在这里检查CodeSandBox