How control how the layout manage the drag and drop 'displacements' of the cells with react-grid-layout

Question

This code creates a 10x1 layout with react-grid-layout . All the elements can move. But I need it when I move one column to another only column don't add an extra row in the 10x1. I need all the movements to happen only in the 10x1. How I can say this to the Grid ? I have this code :

import '/node_modules/react-grid-layout/css/styles.css'
import '/node_modules/react-resizable/css/styles.css'

import GridLayout from "react-grid-layout";

export function MyFirstGrid () {
    const widthCell=1;
    const heightCell=1;
    const layout = [
        { i: "0000", x: 0, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0100", x: 1, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0200", x: 2, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0300", x: 3, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0400", x: 4, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0500", x: 5, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0600", x: 6, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0700", x: 7, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0800", x: 8, y: 0, w: widthCell, h: heightCell,isResizable:false},
        { i: "0900", x: 9, y: 0, w: widthCell, h: heightCell,isResizable:false}
    ];
    const getLayouts = () => {
         const savedLayouts = localStorage.getItem("grid-layout");
         return savedLayouts ? JSON.parse(savedLayouts) : layout;
      
    };


    const handleLayoutChange = (layout) => {
            localStorage.setItem("grid-layout", JSON.stringify(layout));
    };
const borderAdditive="border"
    return (<div>
            <GridLayout
                layout={getLayouts()}
                className="layout"
                cols={10}
                rowHeight={50}
                width={1200}
                onLayoutChange={handleLayoutChange}
                margin={[1,1]}

            >
                <div className={borderAdditive} key="0000">0000</div>
                <div className={borderAdditive} key="0100">0100</div>
                <div className={borderAdditive} key="0200">0200</div>
                <div className={borderAdditive} key="0300">0300</div>
                <div className={borderAdditive} key="0400">0400</div>
                <div className={borderAdditive} key="0500">0500</div>
                <div className={borderAdditive} key="0600">0600</div>
                <div className={borderAdditive} key="0700">0700</div>
                <div className={borderAdditive} key="0800">0800</div>
                <div className={borderAdditive} key="0900">0900</div>
               
            </GridLayout>
        </div>
        );

}

To be graphical on a 10x10 layout now this happens : I moved the element 0000 to 0100 and an extra row is added .

I want to move from 0000 to 0001 and those cells interchange the position. Something like that :

I am guessing this is no way to set with just a set a thing. I am exploring solutions with onDragStop . This event sends the layout as props . I need to figure out how to check and change if the layout doesn't match what I am expecting and change the element. If someone has a solution in this direction will be appreciated. — grojas123, Jul 08 '22 at 05:20
I posted in my post . But I abandon react-grid-layout and I started to use GridStack — grojas123, Jan 03 '23 at 15:45
I did the same react-grid-layout is not developer friendly at all. This library blocked me in everyway. Thanks for the reply. — Bugra Kucuk, Jan 04 '23 at 05:47

score 0 · Answer 1 · answered Jul 11 '22 at 09:11

I know this solution is not perfect. But I want to share if anyone can use this.

// These get a array with only the X and Y of the updated Layout 
function GetXYArray(layout){
        let XYArray=[];
        layout.map(item=>{XYArray.push({x:item.x,y:item.y})})
        return XYArray
    }
// This get what the cell spaces     
function AvailableCoordinates(ChangedLayout,MaxValueX,MaxValueY){
        let ArrayAvailableCoordinates=[];
        let MaxValueColumn=MaxValueY+1;
                for (let xCheck=0;xCheck<=MaxValueX;xCheck++){
                    let tempLayOut=ChangedLayout.filter(item=>{return item.x===xCheck})
                    if(ChangedLayout.filter(item=>{return item.x===xCheck}).length<MaxValueColumn){

                        for (let yCheck=0;yCheck<=MaxValueY;yCheck++){
                              if (tempLayOut.filter(item=>{return item.y===yCheck}).length===0){
                                ArrayAvailableCoordinates.push({x:xCheck,y:yCheck})
                            }
                        }
                    }
                    }
        return ArrayAvailableCoordinates;
                }
const handleOnDragStop=(layout)=>{
        const MaxArrayYValue=9;
        const MaxValueX=9;
        const MaxValueY=9;
        let VarAvailableCoordinates=AvailableCoordinates(GetXYArray(layout),MaxValueX,MaxValueY);
        const itemsValueGreaterThanMaxArrayYValue=layout.filter(function (item){return item.y > MaxArrayYValue})
 // This part reallocate the cells outside of the array and use the spaces Available. For one only one cell , this part can be improved
// on the user case a element have more than 1x1 cell
        itemsValueGreaterThanMaxArrayYValue.map(GTMaxArrayYValue=>(layout.map(item=>{if (item.i===GTMaxArrayYValue.i) { item.x=VarAvailableCoordinates[0].x;
                                                                                                                        item.y=VarAvailableCoordinates[0].y}})))

    }

The layout for testing is :

const layout = [
        { i: "0000", x: 0, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0100", x: 1, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0200", x: 2, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0300", x: 3, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0400", x: 4, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0500", x: 5, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0600", x: 6, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0700", x: 7, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0800", x: 8, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0900", x: 9, y: 0, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0001", x: 0, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0101", x: 1, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0201", x: 2, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0301", x: 3, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0401", x: 4, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0501", x: 5, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0601", x: 6, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0701", x: 7, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0801", x: 8, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0901", x: 9, y: 1, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0002", x: 0, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0102", x: 1, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0202", x: 2, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0302", x: 3, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0402", x: 4, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0502", x: 5, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0602", x: 6, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0702", x: 7, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0802", x: 8, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0902", x: 9, y: 2, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0003", x: 0, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0103", x: 1, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0203", x: 2, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0303", x: 3, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0403", x: 4, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0503", x: 5, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0603", x: 6, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0703", x: 7, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0803", x: 8, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0903", x: 9, y: 3, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0004", x: 0, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0104", x: 1, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0204", x: 2, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0304", x: 3, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0404", x: 4, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0504", x: 5, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0604", x: 6, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0704", x: 7, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0804", x: 8, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0904", x: 9, y: 4, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0005", x: 0, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0105", x: 1, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0205", x: 2, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0305", x: 3, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0405", x: 4, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0505", x: 5, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0605", x: 6, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0705", x: 7, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0805", x: 8, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0905", x: 9, y: 5, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0006", x: 0, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0106", x: 1, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0206", x: 2, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0306", x: 3, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0406", x: 4, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0506", x: 5, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0606", x: 6, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0706", x: 7, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0806", x: 8, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0906", x: 9, y: 6, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0007", x: 0, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0107", x: 1, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0207", x: 2, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0307", x: 3, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0407", x: 4, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0507", x: 5, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0607", x: 6, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0707", x: 7, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0807", x: 8, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0907", x: 9, y: 7, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0008", x: 0, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0108", x: 1, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0208", x: 2, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0308", x: 3, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0408", x: 4, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0508", x: 5, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0608", x: 6, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0708", x: 7, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0808", x: 8, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0908", x: 9, y: 8, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0009", x: 0, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0109", x: 1, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0209", x: 2, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0309", x: 3, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0409", x: 4, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0509", x: 5, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0609", x: 6, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0709", x: 7, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0809", x: 8, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag},
        { i: "0909", x: 9, y: 9, w: widthCell, h: heightCell,isResizable:false,isBounded:BoundedFlag}
    ];

score 0 · Answer 2 · answered Jul 24 '23 at 16:46

0

You can pass compactType either "horizontal" or "vertical". Like so: compactType="horizontal"

answered Jul 24 '23 at 16:46

Samuel Jakobsen

1
1

How control how the layout manage the drag and drop 'displacements' of the cells with react-grid-layout

2 Answers2