Drag-and-drop object-oriented notation

<!---CSS Parts--->

#div1 {
width:200px;
height:300px;
Position:absolute; //To implement drag and drop you need to set div to drag layer
background:red;
}

#div2 {
width:200px;
height:300px;
Position:absolute; //To implement drag and drop you need to set div to drag layer
Background:green;

top:300px;

}

<!---HTML section--->

<div id= "Div1" ></div>
<div id= "Div2" >ddd</div>

<!--script-->

function Drag (ID) {

var _this = this;
THIS.DISX = 0;
This.disy = 0;
This.odiv = document.getElementById (ID);
This.oDiv.onmousedown = function (EV) {//need to save the EV here for use with Firefox
_this.fndown (EV); You need to save the EV to use for Firefox.
};
}

Drag.prototype.fnDown = function (EV) {
var _this = this;
var oevent = EV | | Event
THIS.DISX = Oevent.clientx-this.odiv.offsetleft; //Oevent.clientx Get the current mouse x position this.oDiv.offsetLeft get the left value of the current position floating
This.disy = Oevent.clienty-this.odiv.offsettop; //Oevent.clienty get the current position of the mouse in the Y position this.oDiv.offsetTop get the top value of the current location floating

Document.onmousemove = function (EV) {
_this.fnmove (EV);
};

Document.onmouseup = function () {
_this.fnup ();
};
};

Drag.prototype.fnMove = function (EV) {

var oevent = EV | | Event
This.oDiv.style.left = oevent.clientx-this.disx + ' px '; Oevent.clientx get the current x position of the mouse This.disx get the original x position of the current floating layer
This.oDiv.style.top = Oevent.clienty-this.disy + ' px '; Oevent.clientx get the current x position of the mouse This.disy get the original Y position of the current floating layer
};

Drag.prototype.fnUp = function () {
Document.onmousemove = null;
Document.onmouseup = null;
};

Window.onload = function () {
New Drag (' Div1 ');
New Drag (' Div2 ');
};

<!--script-->

Drag-and-drop object-oriented notation