React-grid-layout: compactType horizontal onDragStop and onResizeStop not returning right x values

[christophediprima]

The x numbers returned are not correct when compactType is set to horizontal.

When on large screen (4 cols) I receive following when changing something:
x: 0, x: 3 and x: 4 for my 3 elements.

When I remove compactType horizontal I receive the right values:
x:0, x:1 and x: 2 for my 3 elements.

Here is my code (sorry but I could not access the bin template):

<ResponsiveReactGridLayout
                autoSize={false}
                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
                className="layout"
                cols={{lg: 4, md: 2, sm: 2, xs: 2, xxs: 1}}
                compactType="horizontal"
                draggableHandle=".drag-component"
                layouts={{
                  lg: layout,
                  md: layout,
                  sm: layout,
                  xs: layout,
                  xxs: layout,
                }}
                margin={margin}
                maxRows={maxRows}
                measureBeforeMount
                onDragStop={this.updateLayout}
                onResizeStop={this.updateLayout}
                rowHeight={rowHeight}>
                {board.widgets.map(widget => (
                  <div key={widget.layout.i}>
                   blabla...
                  </div>
                ))}
              </ResponsiveReactGridLayout>

[trangcongthanh]

If you want to access current position of GridItem after layout (Drag, Resize), you should hook to onLayoutChange.

[christophediprima]

Yep I just noticed that this one was working properly. But I am still concerned that onDragStop and on onResizeStop are returning something different?

[milosKomiRajkovic94]

@trangcongthanh can you please give me one simple example of this usage? I have a similar question here #743

[trangcongthanh]

@milosKomiRajkovic94

// Callback so you can save the layout.
// Calls back with (currentLayout) after every drag or resize stop.
onLayoutChange: (layout: Layout) => void

...
const saveLayout = (layout) => doSomeThingWithNewLayout(layout)
...
render() {
  return <ReactGridLayout onLayoutChange={this.saveLayout}>...</ReactGridLayout>
}
...

@christophediprima yeah. I have same question.

[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