React-sortable-hoc: Selected element under on drag.

[YozhEzhi]

Example: http://rubaxa.github.io/Sortable/
Try to drag element and you'll see "ghost" element under draggable element.

Could we style "ghost" element like this?

[clauderic]

You can achieve this by setting the hideSortableGhost prop to false on your enhanced SortableContainer component.

Then, you can store the index of the element currently being sorted onSortStart and apply some conditional styling from there.

[YozhEzhi]

Thank for some workaround, but it's not what I meant.

[tizzle]

Hi @clauderic,

first of all thank you for your great HOC, i really like it.
i deleted my last message, as i thought i did a very stupid mistake (which i did).

But nonetheless i'm not sure if your suggestion can work. I'm not able to write the index to state in onSortStart, as it breaks the whole component. I get this error:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the sortableList component.

When saving the index to a regular variable (i know, i shouldn't do that) i don't get any renders in react until onSortEnd.

Thus no conditional styling can be applied to SortableElement. Am i missing something?

Cheers

Till

[drewjenkins]

Yeah I'm getting the same issue. If I do a setState in the onSortStart handler, the sorting breaks completely. Makes it impossible to pass the current sorting state down to the SortableElements

[ReDrUm]

With hideSortableGhost set to false the ghosted element remains fixed in place in its original position/cell/slot, and doesn't move to the new cell it's hovering over during a drag operation.
Is there a way to move it to the proposed location ahead of dropping it?

[WhoIsDT]

Is there ability to move ghost with original dragged element?