反应中的可拖动组件无法按预期工作

Question

我正在尝试使用 React 制作一个可拖动的按钮。

按钮以正确的方式拖过页面，但当我放下它时。它的 top 和 left 值变为负值（甚至没有重置为原来的 top:0,left:0），即组件离开页面。

代码沙盒link：code

主要draggable.js组件：

import React, { Component } from 'react';
import { Button } from '@material-ui/core';

class DraggableButton extends Component {

    constructor() {
        super();
        this.state = {
            dragging: false,
            diffX: 0,
            diffY: 0,
            style: {
                top: 0,
                left: 0
            }
        }
    }

    handleMouseDown = (event) => {
        console.log("element caught");
        this.setState({
            diffX: event.clientX - event.currentTarget.getBoundingClientRect().left,
            diffY: event.clientY - event.currentTarget.getBoundingClientRect().top,
            dragging: true
        })
    }

    handleMouseMove = (event) => {
        if (this.state.dragging) {
            console.log("dragging");
            let left = event.clientX - this.state.diffX;
            let top = event.clientY - this.state.diffY;

            this.setState({
                style: {
                    left,
                    top
                }
            }, console.log("style ", this.state.style))
        }
    }


    handleMouseUp = () => {

        console.log('element released');
        console.log('left value ', this.state.style.left);
        console.log('top value ', this.state.style.top);
        this.setState({
            dragging: false,
        })
    }


    render() {
        return (

            <Button
                variant="contained" color="primary"
                style={{ position: "absolute", ...this.state.style }}
                draggable={true}
                onDragStart={this.handleMouseDown}
                onDrag={this.handleMouseMove}
                onDragEnd={this.handleMouseUp}
            // onMouseDown={this.handleMouseDown}
            // onMouseMove={this.handleMouseMove}
            // onMouseUp={this.handleMouseUp}
            >
                draggable button
            </Button>
        );
    }
}

export default DraggableButton;

控制台截图：

如上图所示，拖动时 top: 193 left : 309 当我们放下元素时它转向左侧：-109 top: -13.

为什么会发生这种情况，我们该如何解决？

Answer 1

在你的handleMouseMove中你需要检查event.clientX是否是一个正整数然后改变状态，否则它会减少diffX值并且它会是nevative。（在拖动释放时变为 0）

let left = event.clientX - this.state.diffX;



  handleMouseMove = (event) => {
    if (this.state.dragging) {
      let left = event.clientX - this.state.diffX;
      let top = event.clientY - this.state.diffY;

      if (event.clientX !== 0)
        this.setState({
          style: {
            left,
            top
          }
        });
    }
  };

反应中的可拖动组件无法按预期工作

draggable component in react not working as expected

javascript

css-position

draggable

reactjs