自由拖动的div层

最新推荐文章于 2018-07-18 11:06:00 发布

doubleicon

最新推荐文章于 2018-07-18 11:06:00 发布

阅读量859

点赞数

分类专栏： JavaScript 文章标签：弹出层 div 拖动

本文链接：https://blog.csdn.net/u011872945/article/details/27349117

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

弹出一个Div层，鼠标按住任何一个地方可以实现拖动（可以设置一个标题，按住标题拖动层，如浏览器窗口一样）

<span style="font-family:Comic Sans MS;font-size:14px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        /*
        //this的说明，谁调用this,那么this指向那个对象
        var drag = {
            elementObj: null,
            init:function(obj){
                obj.onmousedown = this.startEvent;//drag 调用的init方法，this在此指向 drag
            },
            startEvent: function (e) {
                var element;
                e = drag.fireEvent(e);
                e.preventDefault() && e.preventDefault;
                drag.elementObj = element = this;//obj对象调用的mousedown方法，this在此指向obj对象

                element.x = e.clientX - drag.elementObj.offsetLeft;
                element.y = e.clientY - drag.elementObj.offsetTop;

                drag.elementObj.onmousemove = drag.moveEvent;//也可以写为document.onmousemove = drag.move
                drag.elementObj.onmouseup = drag.endEvent;//可以写为document.onmouseup = drag.end
            },
            moveEvent: function (e) {
                e = drag.fireEvent(e);
                var left, top;
                left = e.clientX - drag.elementObj.x;
                top = e.clientY - drag.elementObj.y;
                drag.elementObj.style.left = left + "px";
                drag.elementObj.style.top = top + "px";
            },
            endEvent: function (e) {
                e = drag.fireEvent(e);
                drag.elementObj = drag.elementObj.onmousemove = drag.elementObj.onmouseup = null;
                
            },
            fireEvent: function (e) {
                if (!e) {
                    e = window.event;
                    e.target = e.srcElement;
                    e.layerX = e.offsetX;
                    e.layerY = e.offsetY;
                }
                return e;
            }
        }
        window.onload = function () {
            var obj = document.getElementById("float_window");
            drag.init(obj);
        }
        */
        //方法二
        function init(obj) {
            var moving = false;
            var left_len = 0;
            var top_len = 0;
            obj.onmousedown = function (e) {
                moving = true;
                left_len = e.clientX - this.offsetLeft;
                top_len = e.clientY - this.offsetTop;//this指向obj
            };
            obj.onmousemove = function (e) {
                if (moving) {
                    this.style.left = e.clientX - left_len + "px";
                    this.style.top = e.clientY - top_len + "px";
                }
            };
            obj.onmouseup = function (e) {
                moving = false;
            }
        }
        window.onload = function () {
            var obj = document.getElementById("float_window");
            window.init(obj);
        };


    </script>
</head>
<body>
    <div id="float_window" style="width:300px;height:300px;position:absolute;background-color:green;">
        <div id="fw_header" style="width:100%;height:30px;cursor:move;background-color:#55AAAA"></div>
        <div id="fw_content"></div>
    </div>
</body>
</html></span>