Implemented dragging prop in SortableElement

[Robinfr]

I've updated SortableElement to inject the isDragging prop into the WrappedComponent. I've also changed the SortableContainer to allow the SortableElement to re-render before making a clone by making a clone after the state change has been performed.

[clauderic]

Hmm, hadn't considered that approach. Have you tested alongside the collection prop?

I actually wonder if we couldn't try using ReactDOM.unstable_renderSubtreeIntoContainer instead of having to call setState and then having to clone the node, which still feels a little hacky

[Robinfr]

@clauderic no I haven't tried that yet. I'll do that tomorrow.

The callback of setState is meant for this kind of stuff so even though I understand it feels a bit hacky, I think it's perfectly fine. Using something that has the word unstable in it on the other hand feels a bit dangerous..

[clauderic]

Hmm. It's unstable in the sense that the API may change in future releases, but it is still the preferred way of rendering a component subtree into a different container.

[Robinfr]

Do you want me to try to implement the renderSubtreeIntoContainer in a different branch or you want to see if it can be included with this?

Edit: I took a look at how the implementation works from within React. You could probably use the renderSubtreeIntoContainer to render the dragging node. The issue is that you also might want to inject the isDragging prop into the original element, e.g. to hide something in the original element so the height matches. The props should always be the same for both the original WrappedInstance and the node you are dragging, otherwise the layouts may not match causing weird issues where what you are dragging is a different size than the original component.

So I don't mind using the renderSubtreeIntoContainer but I don't think you can get around the fact that you have to set the state, and then render in the callback..

[Robinfr]

I've updated the PR to also take into account the collection prop.

[Robinfr]

Resolved conflicts.

[Robinfr]

@clauderic do you have any intention to merge this? Otherwise I will close this..

[tizzle]

Hey @clauderic,

any news on this?

[Ricardo-Marques]

+1 on this. I have also wanted to keep track of whether an element was being dragged and soon discovered that the element is cloned before it re renders. This feels like an elegant solution.

[minikomi]

Can this PR get another look? It seems useful for large components.

[alidavut]

Changing some styles by dragging would be very helpful. Can you update the PR?

[Chaoste]

@clauderic Hey, is there any chance that this can be merged soon? We would like to give focus-like styles to the dragged component which appears to be impossible at the moment.

Edit 1:
At everyone else, I was able to solve it for now with some ugly global styles. In my case, the dragged element is a li element. So I added a rule like this: body > li { boxShadow: 0px 0px 0px 3px gray }
Edit 2:
Okay, you can just use helperClass to achieve this.