Strange react-dnd behavior (or drag'n'drop HTML5?)

Question

When I hover over a list item, a style — the appearance of box-shadow. Then, when moving this element, box-shadow gets the element that fell into its place, while the cursor is not in the region of this element (which has taken its place). Whoever faced such a problem and how to solve it? Demo: https://codesandbox.io/s/react-dnd-example-13-ve2mu

Answer 1

Looks like the issue is coming from .Card:hover . When you click and drag an element, the hover of the element is still active and it is creating the unclicked element in that place to have the hover effect (ie box-shadow).

You can solve it by adding the following:

.Card:active {
  box-shadow: unset;
}

This simply says that when the card is active(dragging), just unset the box-shadow.