<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
top: 50px;
left: 50px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var drag = {
init:function(dom){
this.dom = dom;
this.bindEvent();
},
bindEvent:function(){
this.dom.onmousedown =this.mouseDown.bind(this);//call和apply会立即执行这个函数,而bind不会
},
mouseDown:function(e){
document.onmousemove = this.mouseMove.bind(this);
document.onmouseup = this.mouseUp.bind(this);
this.X = e.clientX - this.dom.offsetLeft;
this.Y = e.clientY - this.dom.offsetTop;
},
mouseMove:function(e){
this.newX = e.clientX - this.X;
this.newY = e.clientY - this.Y;
this.dom.style.top = this.newY + "px";
this.dom.style.left = this.newX + "px";
},
mouseUp:function(e){
document.onmousemove = null;
document.onmouseup = null;
}
}
var box = document.getElementsByClassName("box")[0];
drag.init(box);
</script>
</body>
</html>
拖拽源码
最新推荐文章于 2025-06-11 14:10:18 发布