##实现React组件的拖拽功能
HTML5原生支持拖拽功能，没有看过相关文档，恰好自己想实现一下React组件的拖拽，在网上看了一些文章之后再结合自己的思考实现了一个简陋的圆形，感觉性能不是很好。
/**
* Created by w on 2018/3/16.
*/
import Reactfrom 'react';
import ReactDOMfrom 'react-dom';
import './dragImg.css';
class DragImgextends React.Component {
constructor(props) {
super(props);
this.state = {
cursor:'pointer',
relativeX:0,
relatveY:0,
isDragging:false
};
this.handleMouseEnter =this.handleMouseEnter.bind(this);
this.handleMouseLeave =this.handleMouseLeave.bind(this);
this.handleMouseDown =this.handleMouseDown.bind(this);
this.handleMouseUp =this.handleMouseUp.bind(this);
this.handleMouseMove =this.handleMouseMove.bind(this);
}
componentDidMount() {
let node =this.refs.dragPanel;
node.style.left ='50px';
node.style.top ='50px';
}
handleMouseEnter(e) {
this.setState({
cursor:'cursor'
})
}
handleMouseLeave(e) {
this.setState({
isDragging:false
})
}
handleMouseDown(e) {
this.setState({
isDragging:true
})
}
handleMouseUp(e) {
console.log(this.state.isDragging);
this.setState({
relativeX:0,
relativeY:0,
isDragging:false
})
}
handleMouseMove(e) {
let node =this.refs.dragPanel;
this.setState({
cursor:'move',
relativeX: e.clientX -node.offsetLeft,
relativeY: e.clientY -node.offsetTop,
});
if (this.state.isDragging) {
node.style.left = e.pageX -this.state.relativeX +'px';
node.style.top = e.pageY -this.state.relativeY +'px';
}
}
render() {
return
onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseMove={this.handleMouseMove} ref="dragPanel" style={{'cursor':this.state.cursor}}>
}
}
ReactDOM.render(,document.getElementById('root'));
+ e.clientX,e.clientY和e.pageX,e.PageY的区别是算不算上滚动条
