Bug: When dropping aligned to a grid, it does not drop where it should

[fairps]

I would consider this a bug.

Overview of the problem

The dragGrid is honored when dragging the object, but when it is dropped it "jumps" when ending the drag. You can see it in the example if you release the drag carefully so you don't move when releasing it and you can watch it jump when you let it go. It is now impossible to drag it back on top of the second item that was never moved, because they are now locked to different 50 x 50 grids (in this case).

Reproduced project

The following CodeSandbox demonstrates the issue: https://codesandbox.io/s/pyyj7l55mx

Description

This is a modified clone of the size/position example. There are two rectangles that start on top of eachother, and each has a dragGrid and resizeGrid of [50, 50].

Steps to Reproduce

1. There are two squares on top of each other. Drag one of them somewhere
2. Try and drag it back and lay it on the second one that hasn't been moved - you will notice they are offset
3. You will also notice a jump any time you drag one and let it drop

Expected behavior

I expected them to drop exactly as a they appeared before release and honoring the dragGrid to keep them on the grid.

Actual behavior

They don't drop where you drop them, and they move off the grid, causing them to have their own grid that is not aligned with other objects using a dragGrid

[kpettinga]

Experiencing the same issue. Thanks for posting.

[kpettinga]

My temporary workaround for this issue is to use the lastX and lastY properties from the DraggableData argument passed in the event handler.

example:

onDragStop(event, data) {
    this.setState({
        x: data.lastX
        y: data.lastY
    })
}

This leads me to believe the issue is isolated to the onDragStop callback since the onDrag callback seems to respect the given grid.

[pebbledesigns]

Any updates on this issue? I have re-created with a potential workaround by @kpettinga but no luck unfortunately https://codesandbox.io/s/4l310zyzw7

[pebbledesigns]

Found a fix for anyone looking. I just commented out //position={{ x: this.state.x, y: this.state.y }}

[flashtheman]

Facing the issue as well. x and y returned from onDragStop is not what it should be according to the snapGrid array setting.

[flashtheman]

Just checked the issue seems to be in the source library (react-draggable). I created an issue for this: https://github.com/mzabriskie/react-draggable/issues/413

[ghost]

I had the same problem

It was necessary to move and resize the element

Using this combination of properties and methods, the necessary behavior was achieved

          onDragStop={(e, d) => this.handleDragStop(e, d)}
          onResize={(e, direction, ref, delta, position) =>
                      this.handleResizeStop(e, direction, ref, delta, position)
                    }
           dragGrid={[10, 10]}
           resizeGrid={[10, 10]}
           size={{
                  width: this.state.width,
                  height: this.state.height,
           }}
           position={{
                      x: this.state.x,
                      y: this.state.y,
                    }}

 handleDragStop = (e, d) => {
    this.setState({ x: d.lastX ,y: d.lastY });
  };

[nicholaschiang]

I had the same problem. And @pebbledesigns, that isn't a solution (that's just making the component uncontrolled... it won't help with us folks who need to control the position).