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

【问题标题】：draggable react divs: exponential movement可拖动的反应 div：指数运动
【发布时间】：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 也是如此。

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

【问题讨论】：

标签： javascript reactjs draggable

【解决方案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))
    })

  }

【讨论】：