Collapse draggable item

[raunofreiberg]

Hey,

Thanks for the great library! I have a use case that doesn't seem to be possible.

On drag, I would like to collapse the item along with it's hidden clone. This is quite useful for long lists where items can be pretty large in height. Collapsing them helps navigate through this list.

I tried doing something like:

height: isDragged ? "50px" : "100px",

on the component in renderItem but only the ghost item seems to change height, but not the hidden one?

Here's an example: https://codesandbox.io/s/sad-einstein-u7feh?file=/src/App.js:1160-1212

Thanks!

[raunofreiberg]

I can collapse the draggable item by doing:

height: isDragged || props.style.visibility === 'hidden' ? "50px" : "100px",

But this still requires me to drag over the initial height of it:

[raunofreiberg]

@tajo any ideas here?

[tajo]

Utilizing beforeDrag could get you closer: https://codesandbox.io/s/romantic-cookies-7odri?file=/src/App.js

However, onChange is not called when the item position is not changed so the height doesn't reset. Maybe we could add afterDrag or having some better API for this use-case (explicit draggedHeight prop?). Although, it seems too rare of a use-case to just add a new API for this, so maybe more general afterDrag to fix my workaround would be the best.

[raunofreiberg]

afterDrag would work for me! With some direction, I could open a PR, if you'd like?

[tajo]

@raunofreiberg Yea, go for it.