<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drag--react</title>
<script src=''></script>
<script src=''></script>
<script src=''></script>
</head>
<style>
*{
margin:0;
padding:0;
}
</style>
<body>
<div id='example'></div>
<script type='text/babel'>
/*拖拽组件*/
class Drag extends {
constructor(){
super();
= {
/*定义两个值用来存放当前元素的left和top值*/
needX:0,
needY:0
}
/*定义两个值用来存放鼠标按下的地方距离元素上侧和左侧边界的值*/
= 0;
= 0;
}
/*定义鼠标下落事件*/
fnDown(e){
/*事件兼容*/
let event = e || ;
/*事件源对象兼容*/
let target = || ;
/*获取鼠标按下的地方距离元素左侧和上侧的距离*/
= - ;
= - ;
/*定义鼠标移动事件*/
= (this);
/*定义鼠标抬起事件*/
= (this);
}
/*定义鼠标移动事件*/
fnMove(e){
/*事件兼容*/
let event = e|| ;
/*事件源对象兼容*/
let target = || ;
({
needX: - ,
needY: -
});
}
fnUp(){
= null;
= null;
}
render(){
/*返回元素*/
return (
<div style={{width:,height:,backgroundColor:,position:,left:,
top:}} onMouseDown={(this)}></div>
)
}
}
(
/*渲染组件*/
/*通过props属性进行传值*/
<Drag style={{width:'100px',height:'100px',backgroundColor:'green',position:'absolute'}}/>,
('example')
);
</script>
</body>
</html>
