search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.7k stars 631 forks source link

how to prevent list reordering while dragging and instead show preview line and only resort after drop #1250

Open 55Cancri opened 11 months ago

55Cancri commented 11 months ago

Its not clear how to display a light blue preview line in a list when dragging items in a sortable list. It's not clear in the docs or examples. I also cant figure out to turn off the animation / reordering while dragging list items and only change the order after dropping. Setting transition: null just turns off the ease animation but still resorts items while dragging.

In the examples section in the docs, both the pages and tree examples at the bottom have preview lines but its not clear at all how to create that. https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/examples-pages-layout--grid

I want to display a horizontal preview line similar to notion when you drag items around. Has anyone managed to do this?

volodymyrdn commented 10 months ago

I think the simpliest way is to use isOverproperty from useSortable. Depending on isOver, you can render the over item in different ways (f.e. render a blue vertical line next to it). But in general, there is a source code of examples on github, so you may take a look there: https://github.com/clauderic/dnd-kit/tree/master/stories/3%20-%20Examples/Advanced/Pages