Dragging selects text in items below

[emersonthis]

I have a vertical stack of items. As I drag one item over the the others, the text in the items that I drag over is getting selected, as would be expected if I click-and-dragged normally. What's the best way to suppress that behavior? Do I need to write callbacks for the dragged-over items to ignore that mouse-down event?

[MarcoRettoreDev]

Hi there, i'm facing the same problem here. Using the library to make a

as the SortableContainer and rows as SortableElements is getting me this behavoir... When dragging an element up or down, the 'brothers' (others rows) are getting selected, it's very annoying. Could you fix it? Thanks

FIX: Well, going around the documentation i came across that setting a [helperClass] prop on the 'SortableContainer' will override the default style on the ghost component (clone of the original), so there you can set a class ex: 'SortableHelperWithOverride' Then in you .css file you set this: .SortableHelperWithOverride{ pointer-events: auto !important; }

I know this maybe isn't the best appoach but it works for me 🎉

[janklimo]

I was facing the same issue. The alternative to using the helperClass prop is just applying user-select: none; to your sortable items, e.g.:

const StyledImageContainer = styled.div`
  position: relative;
  pointer-events: auto;
  user-select: none;
`;