How to use JavaScript to create a drag div Layer

The drag layer is useful in Web design. For example, in some applications that require custom layout, the control needs to be dragged. The following describes how to meet your needs, by the way, you can learn how to implement the drag layer.

The following is a demo of the effect:

This DIV can be moved. You can test it. JavaScript code

<Script type = "text/javascript"> // <! [CDATA [var $ j = function (id) {return document. getElementById (id) ;}; var getMouseP = function (e) {// to obtain the mouse coordinate, pass the evnet parameter e = e | window. event; var m = (e. pageX | e. pageY )? {X: e. pageX, y: e. pageY }:{ x: e. clientX + document. body. scrollLeft-document. body. clientLeft, y: e. clientY + document. body. scrollTop-document. body. clientTop}; return m ;}; move = function (o, t) {o = $ j (o); t = $ j (t); o. onmousedown = function (ev) {var mxy = getMouseP (ev); // obtain the current mouse coordinate var by = {x: mxy. x-(t. offsetLeft), y: mxy. y-(t. offsetTop)}; o. style. cursor = "move"; document. onmousemove = function (ev) {var mxy = getMouseP (ev); t . Style. left = mxy. x-by.x + "px"; t. style. top = mxy. y-by.y + "px" ;}; document. onmouseup = function () {window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty (); this. onmousemove = null ;}} move ("jelle_test_div", "jelle_test_div"); //]> </script>