Item is dropped in wrong position using react-grid-layout on ResponsiveReactGridLayout

Question

I am new to react-grid-layout, I have created a sample example with drag and drop using this example https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html. When the item is dropped it’s always placed to the first column of the grid. X and Y are correct from the alert, What is wrong in my code? This is my code:

    onDrop = (layout, layoutItem, _event) => {
          alert(`Dropped element props:\n${JSON.stringify(layoutItem, ['x', 
          'y', 'w', 'h'], 2)}`);
             this.setState(prevState => ({
                  layouts: {
                  ...prevState.layouts,
                  [prevState.currentBreakpoint]: [
                   ...prevState.layouts[prevState.currentBreakpoint],
                   layoutItem
                ]
             }
         }));
      };

    render() {
    return (

        <div>
            <div className="toolBar">
                <div
                    className="droppable-element"
                    draggable={true}
                    unselectable="on"
                >
                    Button 1
                </div>
            </div>
            <div>
                <ResponsiveReactGridLayout
                    {...this.props}
                    layouts={this.state.layouts}
                    onBreakpointChange={this.onBreakpointChange}
                    onLayoutChange={this.onLayoutChange}
                    onDrop={this.onDrop}
                    droppingItem={this.props.item}
                    measureBeforeMount={false}
                    useCSSTransforms={this.state.mounted}
                    compactType={this.state.compactType}
                    preventCollision={true}
                    isDroppable={true}
                >
                    {this.generateDOM()}
                </ResponsiveReactGridLayout>
            </div>
        </div>
    );
}

Answer 1

I figured out. I added data-grid={el} to the element which should be dropped. This is the code.

   import React from "react";
   import _ from "lodash";
   import { Responsive, WidthProvider } from "react-grid-layout";
   const ResponsiveReactGridLayout = WidthProvider(Responsive);

    export default class DragFromOutsideLayout extends React.Component {
       static defaultProps = {
       className: "layout",
       rowHeight: 30,
       onLayoutChange: function () { },
       cols: { lg: 8, md: 5, sm: 6, xs: 4, xxs: 2 },
       verticalCompact: false,
       preventCollision: true
     };

  state = {
    currentBreakpoint: "lg",
    compactType: "horizontal",
    mounted: false,
    layouts: { lg: generateLayout() },
    newCounter: 0
};

generateDOM(el) {
    return (
        <div key={el.i} data-grid={el}>
            <span className="text">{el.i}</span>
        </div>
    );
   }

  onBreakpointChange = breakpoint => {
    this.setState({
        currentBreakpoint: breakpoint
    });
  };

 onCompactTypeChange = () => {
    const { compactType: oldCompactType } = this.state;
    const compactType =
        oldCompactType === "horizontal"
            ? "vertical"
            : oldCompactType === "vertical"
                ? null
                : "horizontal";
    this.setState({ compactType });
};
onDrop = (layout, layoutItem, _event) => {
    this.setState({
        layouts: {
            lg: this.state.layouts.lg.concat({
                i: this.state.newCounter.toString(),
                x: layoutItem.x,
                y: layoutItem.y,
                w: layoutItem.w,
                h: layoutItem.h
            })
        },
        newCounter: this.state.newCounter + 1
    });
  };

 render() {
    return (
        <div>
            <div className="toolBar">
                <div
                    className="droppable-element"
                    draggable={true}
                    unselectable="on"
                >
                    Button 1
                    </div>
            </div>
            <div className="space"></div>
            <div className="gridL">
                <span>Drop the item here</span>
                <ResponsiveReactGridLayout
                    {...this.props}
                    onDrop={this.onDrop}
                    droppingItem={this.props.item}
                    measureBeforeMount={false}
                    useCSSTransforms={this.state.mounted}
                    compactType={this.state.compactType}
                    preventCollision={true}
                    isDroppable={true}
                >
                    {_.map(this.state.layouts.lg, el => this.generateDOM(el))}
                </ResponsiveReactGridLayout>
            </div>
        </div>
    );
  }
}

function generateLayout() {
   return _.map(_.range(0, 0), function (item, i) {
      var y = Math.ceil(Math.random() * 4) + 1;
       return {
         x: Math.round(Math.random() * 5) * 2,
         y: Math.floor(i / 6) * y,
         w: 2,
         h: y,
         i: i.toString(),
         static: Math.random() < 0.05
      };
   });
  }
const containerElement = document.getElementById('root');
ReactDOM.render(<DragFromOutsideLayout />, containerElement);