I'm using Vue.Draggable to implement drag and drop sorting on a table element. Some of the draggable elements in the table are quite tall (tbody tags with many rows), so I would like to reduce the height of the so-called "ghost" element while the drag is happening.
To clarify, the drag "ghost" element is the copy of the dragging element that changes position in the list in real time. It's the blue element in this example: https://sortablejs.github.io/Vue.Draggable/#/simple (I'm not talking about the "drag image:" the copy of the dragging element that sticks to the mouse cursor)
I have tried hiding all but the first table row with CSS:
.sortable-drag tr:not(:first-child) {
display: none;
}
But the library uses the height of the dragged element to calculate its position relative to the mouse cursor, so this makes the dragging process buggy and unpredictable.
Vue.Draggable is built on Sortable JS and it fires a number of events, so I'm wondering if there's a way to customize the element when the drag begins, if not some option in Vue.Draggable/Sortable that I can use.
The approach above (hiding all but the first row with CSS) actually works as expected, but not without some extra configuration. The "buggy and unpredictable" behavior I was seeing was from an unrelated feature in Sortable JS:
Sortable JS Wiki: direction option
Sortable will try to automatically detect which direction is used by default, but it is best that you give this value yourself.
Once I specified that the table should only sort vertically (by setting the direction="vertical" prop on my Draggable component), the drag ghost started working the way I had hoped.