Is there a way to toggle draggable status without unmout/mount element

[qi-min]

Thanks for submitting an issue to RGL!

Please mark the type of this issue:

• Bug
• Feature Request
• [ √] Question

If you have a question or bug report, please use the WebpackBin Template
to demonstrate. It is much easier for us to help you if you do.

I need a function to toggle draggable status. I do this by changing 'static' or 'isDraggable' property in layout. But changing these two properties will lead element unmounted. Mount a new element take a while in my app because it require data from network. Is there any way to change the status without re-mount the element?

[luminaxster]

TL;DR: Try providing your own draggableHandle=".className":

Example:

render(){
const {isDraggable} = this.props; // or state...
// more code
return <Responsive draggableHandle=".draggable" > 
  <div key="x" >
            <div className={isDraggable?'draggable': 'disabled'}>
              {/*... can be any component */}
           </div>
  </div>
{/*...*/}
</Responsive>;
}

As soon as you remove the 'draggable' className from the div, RGL will not find the handle, thus disabling dragging.

[qi-min]

Thanks @luminaxster , this way does work.

[trydzynski-zen]

I'm impacted by this as well. When I toggle isDraggable and isResizable, all widgets are recreated.
My widgets (the draggable component) cache their queries, so remounting them does not cause network load, however they blink and/or animate which looks poorly.

Could this be fixed in the library, e.g. by calling functions, instead of adding Resizable/Draggable mixins via wrapping in new components? That should be enough to unlock react's reuse of components (I have verified the cause, but not the fix).