react-nestable icon indicating copy to clipboard operation
react-nestable copied to clipboard

add style option to `confirmChange`

Open smeijer opened this issue 5 years ago • 1 comments

It would be nice if we could have an alternative style for the confirmChange === false state.

What I would like, is to have the same drag style as an allowed drop, but instead use a different background color. So the list would still show the spacing / drop-location, but highlighted differently. On drop, the item would revert, just as it does now.

smeijer avatar Aug 25 '20 19:08 smeijer

I consider adding onStart: (dragItem: Item) => void and onCancel: () => void callbacks, so you can know what and when is being dragged to adjust rendering accordingly. But for now you can wait for first confirmChange event and save dragItem to your state for a while (and remove it in onChange or in document.mouseup). Let's keep it open for now.

primetwig avatar Jun 06 '21 11:06 primetwig

now you use onDragStart to save an item which is being dragged to a local variable (using useRef), and use that data in your render function to alternate appearance of all the items.

PS: don't forget to make cleanup with onDragEnd.

primetwig avatar Nov 15 '23 19:11 primetwig