React-sortable-hoc: Change layout before dragging

[Robinfr]

Is there any way to change the layout before dragging, e.g. hide stuff in the element that is being dragged? I tried using CSS but since the height is put on the style tag this doesn't have the desired effect..

[clauderic]

There's probably a way to do it, yes, though I'd need more details on what exactly you're trying to do 😅

[Robinfr]

Alright here's what I'm trying to do:

• I have a list of items
• Each item in that list is draggable
• Each item can have another list inside, this means that the the draggable item can get rather large
• Since the draggable item is so large it becomes hard to drag
• To resolve this, I want to have a "minimized" state while I'm dragging the item where only the header of the item is visible and not the inside list

Any idea on how to do this?

[clauderic]

This should be possible, yes. Try using the helperClass to add some CSS to hide the elements you don't need, and you can specify the dimensions of the helper by passing a custom function to getHelperDimensions (https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L46)

[Robinfr]

I got this working using a mixture of getHelperDimensions, onSortStart, and onSortEnd by using the getHelperDimensions to calculate the height without the elements. I need to use onSortStart to figure out in which node I need to hide/show the items since I only get the node object in onSortStart and not onSortEnd.

This feels incredibily hacky to me to be honest.. It would be nicer if there was a more React-way of doing this. E.g. inject a dragging property into the SortableElement that is being dragged and allow it to re-render in the form in which it should be dragged or something.

[clauderic]

I agree! I'd be happy to explore more React-esque options if you feel like taking a stab at it or simply fleshing out your idea on this more

[Robinfr]

I'll see if I can come up with a nice way if I have some time.

[Robinfr]

OK I took a look at it and currently the blocker is the fact that the helper node is created through an event instead of in the render. If we would conditionally render the helper node in the render method instead, the SortableElement would re-render allowing us to pass an isDragging property to the wrapper component of the SortableElement.

So here is my suggestion:

1. Keep calculations of offset and helper position in handlePress and handleMove functions, however move the variables to the state of of the SortableContainer so they trigger a re-render on change, which is necessary for the following step
2. Move the rendering of the helper node (+ setting the styling) to the render method
3. In the SortableElement in the render method, perform the following check and pass it to the WrappedComponent:

const isDragging = this.context.manager.active && this.context.manager.active.index === this.props.index;

@clauderic what do you think of this approach? We would need to test the performance of this approach, but since it should make optimal use of the VirtualDOM I don't expect too much of a performance impact.

[Robinfr]

I've taken a bit of a different route (but not by much). Check out PR https://github.com/clauderic/react-sortable-hoc/pull/147

I've updated the example in the main index.js to showcase the implementation.

[Robinfr]

@clauderic let me know what you think.

[andrew-rutherford]

Looks nice. Plans for merge?

[minikomi]

Would like a solution to this too.

[cslinmiso]

I wonder if this library still active? dozens of PRs are not handling.

[clauderic]

You can use the newly introduced updateBeforeSortStart prop