2020-12-02 02:24

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

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


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


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • weixin_39653622 weixin_39653622 5月前

    Experiencing the same issue. Thanks for posting.

    点赞 评论 复制链接分享
  • weixin_39653622 weixin_39653622 5月前

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


    onDragStop(event, data) {
            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.

    点赞 评论 复制链接分享
  • weixin_39629075 weixin_39629075 5月前

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

    点赞 评论 复制链接分享
  • weixin_39629075 weixin_39629075 5月前

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

    点赞 评论 复制链接分享
  • weixin_39593340 weixin_39593340 5月前

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

    点赞 评论 复制链接分享
  • weixin_39593340 weixin_39593340 5月前

    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

    点赞 评论 复制链接分享
  • weixin_39944515 weixin_39944515 5月前

    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]}
                      width: this.state.width,
                      height: this.state.height,
                          x: this.state.x,
                          y: this.state.y,
     handleDragStop = (e, d) => {
        this.setState({ x: d.lastX ,y: d.lastY });
    点赞 评论 复制链接分享
  • weixin_39661345 weixin_39661345 5月前

    I had the same problem. And , 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).

    点赞 评论 复制链接分享