[BUG] - Elements when Moveable is using the 'individualGroupable' prop are affecting each other randomly

[thezuliano]

Hi everyone!

I'm trying to use this amazing package to create a dashboard of elements, where the user can resize and move them freely, but I'm getting stuck here: The problem is that they're affecting each other when one is being resized, watch the video:

20250305-1133-15.1123481.mp4

How I can avoid this weird behavior?

I'm using it in a React/Nextjs project, below is the portion of code when Moveable is being used:

            <div className="rounded-lg bg-emerald-600/20 p-4 w-full relative" >
              {items.map((item, i) => (
                <div key={item.id} className={clsx('p-4 bg-green-700 rounded-md flex flex-col w-28 h-48 draggableTarget', `drag${i}`)} >
                </div>
              ))}

              <Moveable
                // ref={moveableRef}
                // target={targetRef}
                target={".draggableTarget"}
                individualGroupable={true}
                draggable={true}
                throttleDrag={1}
                edgeDraggable={false}
                origin={false}
                resizable={true}
                keepRatio={true}
                rotatable={true}
                // snappable={true}
                // snapGridWidth={10}
                // snapGridHeight={10}
                renderDirections={[ "nw", "ne",  "se", "sw" ]}
                bounds={{
                  left: 0,
                  top: 0,
                  right: 0,
                  bottom: 0,
                  position: "css"
                }}
                edge={false}
                onDrag={e => {
                    e.target.style.transform = e.transform;
                    console.log({ x: e.translate[0], y: e.translate[1] });
                }}
                onDragEnd={e => {
                    // console.log(e);
                }}
                onResize={e => {
                    e.target.style.width = `${e.width}px`;
                    e.target.style.height = `${e.height}px`;
                    e.target.style.transform = e.drag.transform;
                }}
                onRotate={e => {
                  e.target.style.transform = e.drag.transform;
                }}
                onBound={e => {
                    console.log(e);
                }}
              />
            </div>

some custom css, FYI:

/* MOVEABLE CUSTOM CSS */
.moveable-line {
    background: black !important;
}

.moveable-control {
    background-color: #9bffd0 !important;
}

.moveable-rotation-control {
  background-color: #00ff15 !important;
  transform: translateY(20) translateX(0.4) !important;
}

.moveable-rotation-control, .moveable-resizable {
  border-color: #166534 !important;
}

.moveable-rotation-line {
  transform: scaleY(0.5) translateY(20) !important;
}

The version of the package in the package.json file:

"react-moveable": "^0.56.0",

Thanks in advance

[Fang328]

Hello, the container‘s height was changed when you drag. you can set 'absolute' in the targets