JavaScript implements drag-and-drop effects on page elements

The following page has two Div, which allows you to drag the two elements to any location.

The HTML page code that implements the effect is seen in the following example:

<! DOCTYPE html>

The external JavaScript file code looks like the following:
/** * Get page element based on ID * @param ID * @returns {htmlelement} */function $ (id) {return document.getElementById (ID);} /** * Create a factory method to drag objects */function Createdraggableobject () {return {obj:null, left:0, top:0, oldx:0, old            y:0, Ismouseleftbuttondown:false, init:function (obj) {this.obj = Obj;var = this;                This.obj.onmousedown = function (args) {var evt = args | | event;                This.style.zIndex = 100;                That.ismouseleftbuttondown = true;                THAT.OLDX = Evt.clientx;                    That.oldy = Evt.clienty;if (this.currentstyle) {that.left = parseint (this.currentStyle.left);                That.top = parseint (this.currentStyle.top);                    } else {var divstyle = Document.defaultView.getComputedStyle (this, null);                    That.left = parseint (divstyle.left);          That.top = parseint (divstyle.top);      }            };            This.obj.onmousemove = function (args) {that.move (args | | event);            };                This.obj.onmouseup = function () {That.ismouseleftbuttondown = false;            This.style.zIndex = 0;        };  }, Move:function (evt) {if (this.ismouseleftbuttondown) {var dx = parseint (evt.clientx                -THIS.OLDX);                var dy = parseint (evt.clienty-this.oldy);                This.obj.style.left = (this.left + dx) + ' px ';            This.obj.style.top = (this.top + dy) + ' px '; }        }    };}


 
JavaScript implements drag-and-drop effects on page elements