import React from 'react'
 
/*拖拽组件*/
class Drag extends React.Component {
	constructor() {
		super();
		this.state = {
			/*定义两个值用来存放当前元素的left和top值*/
			needX: 0,
			needY: 0,
		}
		/*定义两个值用来存放鼠标按下的地方距离元素上侧和左侧边界的值*/
		this.disX = 0;
		this.disY = 0;
	}

	 addEvent = (el, event, handler) => {
		if (!el) return;
		if (el.attachEvent) {
			  el.attachEvent('on' + event, handler);
		} else if (el.addEventListener) {
			  el.addEventListener(event, handler, false);
		} else {
			  el['on' + event] = handler;
		}
	  };
	  
	 removeEvent = (el, event, handler) => {
		if (!el) return;
		if (el.detachEvent) {
			  el.detachEvent('on' + event, handler);
		} else if (el.removeEventListener) {
			  el.removeEventListener(event, handler, false);
		} else {
			  el['on' + event] = null;
		}
	};

	/*定义鼠标下落事件*/
	fnDown = (e) => {
		var that = this;
		/*事件兼容*/
		const event = e || window.event;
		/*事件源对象兼容*/
		const target = event.target || event.srcElement;
		/*获取鼠标按下的地方距离元素左侧和上侧的距离*/
		that.disX = event.clientX - target.offsetLeft;
		that.disY = event.clientY - target.offsetTop;
		// /*定义鼠标移动事件*/
		that.addEvent(document, 'mousemove', that.fnMove);
		// /*定义鼠标抬起事件*/
		that.addEvent(document, 'mouseup', that.fnUp);
		that.setState({})
	}
	/*定义鼠标移动事件*/
	fnMove = (e) => {
		var that = this;
		/*事件兼容*/
		const event = e || window.event;
		/*事件源对象兼容*/
		const target = event.target || event.srcElement;
		that.setState({
			needX: event.clientX - that.disX,
			needY: event.clientY - that.disY,
		});
	}
	fnUp = () => {
		this.removeEvent(document, 'mousemove', this.fnMove);
    	this.removeEvent(document, 'mouseup', this.fnUp);
	}
	render() {
		/*返回元素*/
		return (
			<div onMouseDown={this.fnDown} style={{
				width: this.props.style.width,
				height: this.props.style.height,
				backgroundColor: this.props.style.backgroundColor,
				position: this.props.style.position,
				left: this.state.needX,
                top: this.state.needY,
                zIndex:this.props.style.zIndex,
                overflow:this.props.style.overflow,
				// transform: `translate(${this.state.needX}px, ${this.state.needY}px)`,
				cursor: "move",
			}}
			>{this.props.children}</div>
		)
	}
}
export default Drag