Question

我重新回到React，并希望有一些组件可以被用户拖到我正在制作的网站上。请注意，可拖动我的意思是用鼠标在页面上移动，而不是'drag and drop'类型的可拖动。

我的代码到目前为止有点工作，但有点生涩，并且在鼠标启动/释放时并不总是注册。

这是我尝试制作可拖动的组件。

import React from 'react';

export default class Folder extends React.Component {

  constructor(props) {
    super(props);
    this.state = {mouseDown: false,
                    name: props.name, 
                    left: props.left,
                    top:props.top   
                 };
  } 

  // mouse down -> grab coords and offset
  // mouse move, if mouse down true, make mouse coords 
  // folder coords
  // on mouse up change mouse down to false.(can't move)

  mouseHandler(e){
    this.setState({mouseDown: true})
  }
  mouseMove(e){
    if(!this.state.mouseDown){
        return
    }else{
        console.log('mouse held and moving')
        let newLeft = e.clientX - e.nativeEvent.offsetX
        let newTop = e.clientY - e.nativeEvent.offsetY
        this.setState({left: newLeft, top:newTop})
    }
  }
  mouseUp(e){
    this.setState({mouseDown: false})
    console.log('mouse up')
  }



  render() {
    return  (<div className="icon" 
             onMouseDown={(e) => this.mouseHandler(e)}
             onMouseMove={(e) => this.mouseMove(e)}
             onMouseUp={(e) => this.mouseUp(e)}
             style={{top: this.state.top, left: this.state.left}} >
                <div className="tab"></div>
                <div className="foldergap"></div>
                <div className="foldertitle"><p>{this.state.name}</p>/div>
            </div>)
  }
};

我知道有一些我可以使用的库但我想尽可能地使用自己的工作。我也看到了类似的question，但答案似乎都是使用过时的技术，DOM操作（看起来不像是反应方式＆＃39;）或库。

我的问题是我做错了什么以及推荐的实现此功能的方法是什么？

谢谢。

如何实现可拖动的React组件

0 个答案: