Сортируемый список реагирует и использует пользовательский слой перетаскивания

Question

Я создал простой сортируемый список с помощью activ-dnd, используя код, похожий на сортируемый пример реагирования-dnd, который можно найти здесь в codesandbox .

Однако у меня возникли некоторые трудности при попытке чтобы понять, как я должен настроить этот пример и использовать пользовательский слой перетаскивания Reaction-DDD для настройки предварительного просмотра перетаскивания. В частности, я хочу изменить цвет фона компонента, как только я начну его перетаскивать. Ничего сложного.

Почему мне нужно использовать пользовательский слой перетаскивания? Потому что я не могу стилизовать предварительный просмотр перетаскивания, используя CSS из-за ограничений браузера API и HTML5 Backend реагирования-dnd (что я и использую).

Я не смог найти ни одного примера использования настраиваемого слоя перетаскивания в сортируемом списке, поэтому любая помощь будет принята.

Answer 1

Вы можете добавить css при наведении на Card. Не уверен, что это то, что вам нужно ...

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