上一節(jié)用面向?qū)ο蟮姆椒▽?xiě)了選項(xiàng)卡，這次我們來(lái)講講拖拽
面向過(guò)程的拖拽
拖拽主要是對(duì)位置的定義稍途，綁定監(jiān)聽(tīng)器監(jiān)聽(tīng)鼠標(biāo)移動(dòng)的位置。
<!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>
面向?qū)ο蟮耐献?/h4>
<!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>
<!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>
注意點(diǎn)
- 因?yàn)閙ouseover和mouseup是嵌套在mousedown里面的砚婆，所以需要在mousedown里面再去定義一次this械拍，不然會(huì)報(bào)錯(cuò)"_this is not defeined"
- document.onmouseove是針對(duì)整個(gè)網(wǎng)頁(yè)的，所以不需要加上this
