I am using SortableJS to implement drag and drop for a todo app. Sample structure like so:

List 1:
- Item
- Item
- Item

List 2:
- Item a
- Item b
- Item c

To make list drags more effective, I would like to hide the items when I do the drag. This I can manage through CSS (display: none) by hiding on drag start and showing again on drag end. However, when I start the drag, because the items disappear, SortableJS fills-in the empty spaces with lists lower down the order. As you can imagine, this causes everything to be out of place.

I haven’t seen anything in SortableJS which will help me with this issue but I wonder if there are some techniques I can employ to make this sort experience better? e.g. on drag, hide everything and show a separate div with only list items and somehow transfer the mouse grab to the list in the new div?

Appreciate any ideas!