reactjsreact-sortable-hoc

Lost styles while dragging elements


I develop a project in React.js where I use react-sortable-hoc plugin for drag elements. I want to drag sections with inputs.

Before dragging it looks fine: before dragging

If I drag element, it looks like this: enter image description here

So styles in input, textarea and all form elements are lost while I dragging it.

Could you help me why styles lost and how I can fix it?

Thank you.


Solution

  • When you dragging element, react-sortable-hoc plugin appends this element to body. If you have cascade in your styles, for example:

    .parent-component .draggable-element {
     // some styles
    }
    

    This style will not apply because of in that moment element with draggable-element class don't be a child for element with parent-component class.