Using JavaScript to drag and drop webpage Elements

The following page contains two divs. You can drag these two elements to any position.

The HTML page code to achieve this effect is as follows:

    
             <script type="text/javascript" src="js/mylib.js"></script>    <script type="text/javascript">        window.onload = function() {            var obj1 = createDraggableObject();            var obj2 = createDraggableObject();            obj1.init($('xixi'));            obj2.init($('haha'));        };    </script>    Fuck!    Shit!

The external JavaScript file code is as follows:

/*** Obtain the page element by id * @ param id * @ returns {HTMLElement} */function $ (id) {return document. getElementById (id);}/*** create a factory method for dragging objects */function createDraggableObject () {return {obj: null, left: 0, top: 0, oldX: 0, oldY: 0, isMouseLeftButtonDown: false, init: function (obj) {this. obj = obj; var that = 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 ';}}};}