创建鼠标可以拖动的DIV_鼠标可拖动-CSDN博客

<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>