图片拖拽面向对象写法-2
Posted gunner
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片拖拽面向对象写法-2相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #ffff00;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: #0000ff;
position: absolute;
left: 120px;
}
</style>
<script>
window.onload=function(){
new Drag("box1")
new Drag("box2")
}
//第四步：全局变量变成属性 该加this加this
// var oDiv=null;
// var disX=0;
// var disY=0;
//第三步：Window.onload改成构造函数
function Drag(id){
this.disX=0
this.disY=0
var _this=this;
this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function(){
//第六步 修改当前的从属关系
_this.fnDown()
};
}
//第五步：把函数改为Drag原型方法
Drag.prototype.fnDown=function(ev){
var _this=this;
var oEvent=ev||event;
this.disX = oEvent.clientX-this.oDiv.offsetLeft;
this.disY = oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function(){
_this.fnMove()
}
document.onmouseup=function(){
_this.fnUp()
}
}
Drag.prototype.fnMove=function(ev){
var oEvent=ev||event;
this.oDiv.style.left=oEvent.clientX-this.disX+‘px‘;
this.oDiv.style.top=oEvent.clientY-this.disY+‘px‘;
}
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
以上是关于图片拖拽面向对象写法-2的主要内容，如果未能解决你的问题，请参考以下文章