Home > Developer > JavaScript
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute; z-index:555;}
#div2 {width:200px; height:200px; background:green; position:absolute;}
</style>
<script>
Window.onload=function () {
New Drag ("Div1");//Drag constructor object
New Limitdrag ("Div2");//Inherit Drag object method, property
}
function Drag (ID)
{
var _this=this;//sub-Number Reference object
this.disx=0;//Setting variables
this.disy=0;
This.odiv=document.getelementbyid (ID);
This.odiv.onmousedown=function (EV) {//Click to execute the number of fndown/
Console.log (_this);
_this.fndown (EV);
return false;
}
}
Drag.prototype.fndown=function (EV)
{
var _this=this;
var oevent=ev| | event;//compatible with IE's mouse coordinates
this.disx=oevent.clientx-this.odiv.offsetleft;//the distance from the mouse click position to the left of the Div
this.disy=oevent.clienty-this.odiv.offsettop;//the distance from the mouse click position to the top edge of the DIV
Console.log (this.disx+ ":" +this.disy);
Document.onmousemove=function (EV)//The number of executions performed while moving
{
_this.fnmove (EV);
}
Document.onmouseup=function (EV)//perform culvert when relaxed
{
_this.fnup (EV);
}
}
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.disx+ "PX"
}
Drag.prototype.fnup=function ()
{
Document.onmousemove=null;
Document.onmouseup=null;
}
function Limitdrag (ID)//Inheritance Culvert number
{
Drag.call (This,id);//Inheritance property, call invokes one method of an object, replacing the current object with another object.
}
for (var i in Drag.prototype)
{
limitdrag.prototype[i]=drag.prototype[i];//Inheritance Method
}
Limitdrag.prototype.fnmove=function (EV)//own unique method
{
var oevent=ev| | Event
var l=oevent.clientx-this.disx;//get left edge distance
var t=oevent.clienty-this.disy;//get top edge distance
if (l<0)
{
l=0;
}
else if (l>document.documentelement.clientwidth-this.odiv.offsetwidth)
{
L=document.documentelement.clientwidth-this.odiv.offsetwidth;
}
this.odiv.style.left=l+ "px";
this.odiv.style.top=t+ "px";
}
</script>
<body>
<div id= "Div1" ></div>
<div id= "Div2" ></div>
</body>
Javascript Object-Oriented programming drag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
