创建鼠标可以拖动的DIV

来源：互联网发布：女装品牌推荐知乎编辑：程序博客网时间：2024/05/18 01:28
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>自由拖动的DIV层方块</title>    <meta http-equiv="content-type" content="text/html;charset=gb2312" />    <style type="text/css">        #draggable        {            background-color: green;            font-size: 9pt;            padding: 30px;            color: white;            width: 360px;            height: 324px;            position: absolute;        }    </style>    <script type="text/javascript">        var rDrag = {            o: null,            init: function(o) {                o.onmousedown = this.start;            },            start: function(e) {                var o;                e = rDrag.fixEvent(e);                //取消浏览器的默认行为                e.preventDefault && e.preventDefault();                rDrag.o = o = this;                o.x = e.clientX - rDrag.o.offsetLeft;                o.y = e.clientY - rDrag.o.offsetTop;                document.onmousemove = rDrag.move;                document.onmouseup = rDrag.end;            },            move: function(e) {                e = rDrag.fixEvent(e);                var oLeft, oTop;                oLeft = e.clientX - rDrag.o.x;                oTop = e.clientY - rDrag.o.y;                rDrag.o.style.left = oLeft + 'px';                rDrag.o.style.top = oTop + 'px';            },            end: function(e) {                e = rDrag.fixEvent(e);                rDrag.o = document.onmousemove = document.onmouseup = null;            },            fixEvent: function(e) {                if (!e) {                    e = window.event;                    e.target = e.srcElement;                    //FF的layer是相对于元素的左上角                    e.layerX = e.offsetX;                    e.layerY = e.offsetY;                }                return e;            }        }        window.onload = function() {            var obj = document.getElementById('draggable');            rDrag.init(obj);        }    </script></head><body>    <div id="draggable">        这个可以拖动！        <div style="background-color: blue; height: 300px;">                </div>    </div></body></html>