我重新回到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;)或库。
我的问题是我做错了什么以及推荐的实现此功能的方法是什么?
谢谢。