<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drag--react</title>
<script src='react.js'></script>
<script src='react-dom.js'></script>
<script src='babel.min.js'></script>
</head>
<style>
*{
margin:0;
padding:0;
}
</style>
<body>
<div id='example'></div>
<script type='text/babel'>
/*拖拽组件*/
class Drag extends React.Component{
constructor(){
super();
this.state = {
/*定义两个值用来存放当前元素的left和top值*/
needX:0,
needY:0
}
/*定义两个值用来存放鼠标按下的地方距离元素上侧和左侧边界的值*/
this.disX = 0;
this.disY = 0;
}
/*定义鼠标下落事件*/
fnDown(e){
/*事件兼容*/
let event = e || window.event;
/*事件源对象兼容*/
let target = event.target || event.srcElement;
/*获取鼠标按下的地方距离元素左侧和上侧的距离*/
thisreact---拖拽组件
最新推荐文章于 2024-05-23 08:48:09 发布
最低0.47元/天 解锁文章
1239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
