可拖动的反应 div：指数运动

Posted 2023-05-08

【中文标题】可拖动的反应 div：指数运动

【英文标题】：draggable react divs: exponential movement

【发布时间】：2020-07-26 00:06:19

【问题描述】：

我正在尝试在 React 中创建一个可拖动的组件来跟踪鼠标指针的路径，但是该组件正在呈指数级移动。 Working demo here

我的设置如下所示：

Blocks：作为可拖动组件的持有者（下图中的灰色）

Block：这是可拖动的组件（下图中的粉红色） 我将 Block 的初始位置设置为 left:0, top:0 ，然后根据鼠标拖动更改位置。 这是更新位置的逻辑：

点击粉色方块后，我触发了 onMouseDown 事件：

// function to handle mouse down
  mouseDown = (e) =>
    this.setState(originalX:e.clientX, originalY:e.clientY);
    window.addEventListener("mousemove",this.moving);
    window.addEventListener('mouseup', this.mouseUp);
  

设置 originalX, originalY 来跟踪触发点击事件的原始位置。这用于计算位置的增量并相应地更新 left 和 top 属性

这是我的鼠标移动的样子：

 // function to handle mouse move
  moving = (clientX, clientY)=>

    this.setState((prevState)=>
       return 
         style:
           left:(this.state.left+(clientX - this.state.originalX))+"px" ,
           top: (this.state.top+(clientY - this.state.originalY))+"px"
          ,
          left:this.state.left+(clientX - this.state.originalX),
          top: this.state.top+(clientY - this.state.originalY)
          ;
      );
  

我在这里将 this.state.style.left 设置为 (this.state.left+(clientX - this.state.originalX))+"px" this.state.left 表示传递给组件的初始位置（在本例中为 0）。 Baiscally，我将位置 (clientX - this.state.originalX) 的变化添加到初始位置。此外，我将此计算存储在 this.state.left 中以供将来更新。属性 top 也是如此。

理想情况下，这应该在我拖动时跟踪鼠标指针，但移动似乎是指数级的。我尽力调试，但无法找出问题所在。如果有人可以在这里提供帮助，不胜感激。

【参考方案1】：

我做了一些挖掘并发现了问题。我应该将左右属性的状态更新移动到 mouseUp 函数。以下是我修改这两个函数的方法：

  moving = (clientX, clientY, target)=>

    this.setState((prevState)=>
       return 
         style:
           left:(this.state.left+(clientX - this.state.originalX))+"px" ,
           top: (this.state.top+(clientY - this.state.originalY))+"px"
          
          ;
      );
  

  mouseUp = (clientX,clientY) => 
    window.removeEventListener("mousemove",this.moving);
    window.removeEventListener("mouseup",this.mouseUp);

    this.setState(
      left:(this.state.left+(clientX - this.state.originalX)),
      top:(this.state.top+(clientY - this.state.originalY))
    )