React-grid-layout: How to disable drag and drop in mobile resolution

[tiagocedrim]

Hi everybody,

I wonder how to disable drag and drop in mobile resolution.
It's possible?

[cp]

isDraggable and isResizable should allow you to do this easily. https://github.com/STRML/react-grid-layout#grid-layout-props

[tiagocedrim]

@cp Could you show me an example?

[cp]

<ReactGridLayout isDraggable=false isResizable=false layout={layout} cols={12} rowHeight={30} width={1200}>
  <div key={'a'}>a</div>
  <div key={'b'}>b</div>
  <div key={'c'}>c</div>
</ReactGridLayout>

[tiagocedrim]

@cp but how to put

isDraggable={false}
isResizable={false}

only when you are in cellular resolution?

[cp]

This library looks like it could be a good solution: https://github.com/contra/react-responsive

[tiagocedrim]

@cp To resolve this problem , it really is necessary to install a library?

I'm sad about it 😭

[STRML]

Just add a resize handler to the window, measure its width & toggle the bool based on some width (like 768).

[MrCsabaToth]

@STRML question: is it possible to set the isDraggable and isResizable attributes run-time?
I wrapped around ResponsiveReactGridLayout into a container react element and placed an Edit Mode on/off switch above the layout. That button sets the editMode state of the container element, which passes down the isDraggable and isResizable properties according to the switch. So far this seems like not working for me. I start with both props false, but when I supposedly re-render the elements, the edit mode does not turn on for real.

[cp]

@MrCsabaToth That's indeed possible, and is how I have my app set up. It's likely a bug in how your app is passing props to RGL.

[MrCsabaToth]

@cp Do you have source code example? Do you set the isDraggable / isResizable globally fo the layout or individually for the items? If you set it inidvidually, how do you set it (or do you set it at all) for the whole layout at the same time?

[tiagocedrim]

Do you have source code example? Do you set the isDraggable / isResizable globally fo the layout or individually for the items? If you set it inidvidually, how do you set it (or do you set it at all) for the whole layout at the same time?

@cp

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days