上一节用面向对象的方法写了选项卡，这次我们来讲讲拖拽
面向过程的拖拽
拖拽主要是对位置的定义，绑定监听器监听鼠标移动的位置。
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById('div1');
div.onmousedown = function (ev){
var oEvent = ev||event;
var disX = oEvent.clientX - div.offsetLeft;
var disY = oEvent.clientY - div.offsetTop;
document.onmouseover = function(ev){
div.style.left = oEvent.clientX - disX + 'px';
div.style.top = oEvent.clientY - disY + 'px';
}
document.onmouseup = function(){
document.onmouseover = null;
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
面向对象的拖拽
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var a = new t();
}
function t() {
var _this = this;
this.div = document.getElementById('div1');
this.disX = 0;
this.disY = 0;
this.div.onmousedown = function() {
_this.mDown();
}
}
t.prototype.mDown = function (ev) {
var _this = this;
var oEvent = ev||event;
this.disX = oEvent.clientX - this.div.offsetLeft;
this.disY = oEvent.clientY - this.div.offsetTop;
document.onmouseover = function() {
_this.mOver();
}
document.onmouseup = function(){
_this.mUp();
};
}
t.prototype.mOver=function (ev){
var oEvent = ev||event;
this.div.style.left = oEvent.clientX - this.disX + 'px';
this.div.style.top = oEvent.clientY - this.disY + 'px';
}
t.prototype.mUp = function() {
document.onmouseover = null;
document.onmouseup = null;
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
注意点
- 因为mouseover和mouseup是嵌套在mousedown里面的，所以需要在mousedown里面再去定义一次this，不然会报错"_this is not defeined"
- document.onmouseove是针对整个网页的，所以不需要加上this
