перетаскиваемая реакция divs: экспоненциальное движение

Question

Я пытаюсь создать перетаскиваемый компонент в React, который отслеживает путь указателя мыши, но вместо этого компонент движется в геометрической прогрессии. Рабочая демонстрация здесь

Вот как выглядит моя установка:

Блоки: это действует как держатель для перетаскиваемых компонентов (серый на рисунке ниже)

Блок: это перетаскиваемый компонент (розовый на изображении ниже) Я устанавливаю начальную позицию блока слева: 0, сверху: 0, а затем изменяю позицию на основе перетаскивания мышью , Вот логи c для обновления позиции:

при нажатии на розовый блок Я запускаю событие 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 для отслеживания исходной позиции, в которой событие щелчка сработало. Это используется для вычисления дельты в положении и обновления левого и верхнего атрибутов соответственно

Вот как выглядит мой ход мыши:

 // 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). По своему усмотрению я добавляю изменение в позицию (clientX - this.state.originalX) к исходной позиции. Также я сохраняю этот расчет в this.state.left для будущих обновлений. То же самое касается атрибута top.

В идеале это должно отслеживать указатель мыши при перетаскивании, но движение кажется экспоненциальным. Я старался изо всех сил, чтобы отладить, но не мог понять проблему. Благодарен, если кто-нибудь может помочь здесь.

Answer 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))
    })

  }