首页 新闻 会员 周边 捐助

用JS写一个弹出层,并且这个弹出层可以拖动

0
[已解决问题] 解决于 2015-06-07 20:00

用JS写一个弹出层,并且这个弹出层可以拖动。代码要相对简单全面吧,毕竟我是自学,最好是多一点注释!谢谢

Nopen的主页 Nopen | 初学一级 | 园豆:165
提问于:2015-06-01 09:35
< >
分享
最佳答案
1
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #win { width: 800px; height: 400px; border: 1px solid #000; background: #eee; position: absolute; z-index: 99; /* 可移动使用绝对定位, 弹出层置于顶层 */ }
            #tit { width: 800px; height: 50px; border-bottom: 1px solid #000; background: #08f; }
        </style>
    </head>
    <body>
        <div id="win">
            <div id="tit"></div>
        </div>
    </body>
    <script type="text/javascript">

    // 兼容 旧版 IE 写法不一, 且容易出错, 了解原理后可使用框架.
    // 实现思路.
    // 1.鼠标在 菜单条/窗体 上按下时:  记录坐标; 绑定 document 鼠标 移动/弹起 事件;
    // 2.鼠标移动时 计算坐标 设置 left, top;
    // 3.鼠标弹起时 移除 document 鼠标 移动/弹起 事件;

    // 绑定事件
    function bind( htmlDocument, eventName, callback ) {
        if (htmlDocument.addEventListener)
            htmlDocument.addEventListener(eventName, callback, false);
        else
            htmlDocument.attachEvent('on' + eventName, callback); // 旧版 IE 浏览器
    }

    // 移除事件
    function unbind( htmlDocument, eventName, callback ) {
        if (htmlDocument.removeEventListener)
            htmlDocument.removeEventListener(eventName, callback, false);
        else
            htmlDocument.detachEvent('on' + eventName, callback); // 旧版 IE 浏览器
    }


    // htmlDocument : 要移动的对象    相当于窗体
    // targetDocument : 触发移动的对象 相当于菜单条 (鼠标点到菜单条上才能移动窗体)


    // 开始
    function start( htmlDocument, targetDocument ) {
        
        // 如果不传 targetDocument 则使用 htmlDocument
        targetDocument = targetDocument || htmlDocument;

        // 鼠标坐标
        var x, y;

        // 移动
        var move = function() {
            // 移除框选的内容 (鼠标按下拖动往往是选择文本, 可以用CSS 控制 不能选中文本)
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            // 计算移动的坐标
            // 这里还需限制其移动范围 (自己思考计算) 如:
            //    坐标不能是 负数, 
            //    不能移出父级窗体外,
            var _x = event.clientX - x;
            var _y = event.clientY - y;

            // 设置 left, top 
            // 如果只能横着移动 则忽略 left
            // 如果只能竖着移动 则忽略 top
            htmlDocument.style.left = _x + 'px';
            htmlDocument.style.top = _y + 'px';
        };

        // 停止
        var stop = function() {
            // 移除 鼠标移动事件
            unbind(document, 'mousemove', move);
            // 移除 鼠标弹起事件
            unbind(document, 'mouseup', stop);

            // 移除 鼠标移出浏览器事件
            if (document.all) {// 旧版 IE 浏览器
                unbind(document, 'losecapture', stop);
                document.releaseCapture(); // 与 setCapture 配对的..
            } else {
                unbind(window, 'blur', stop);
            }
        };


        // 绑定 鼠标按下事件
        bind(targetDocument, 'mousedown', function () {

            // 鼠标按下时 记录当前鼠标位置
            x = event.clientX - htmlDocument.offsetLeft;
            y = event.clientY - htmlDocument.offsetTop;

            // 绑定 鼠标移动事件
            bind(document, 'mousemove', move);
            // 绑定鼠标弹起事件
            bind(document, 'mouseup', stop);

            // 绑定鼠标移出浏览器事件
            if (document.all) {// 旧版 IE 浏览器
                bind(document, 'losecapture', stop);
                document.setCapture(); // IE 捕获 窗体外的鼠标
            } else {
                bind(window, 'blur', stop);
                event.preventDefault(); // 阻止事件
            }
        })
    }

    // 使用
    start(document.getElementById('win'), document.getElementById('tit'));
    </script>
</html>
View Code
奖励园豆:5
过于执著 | 菜鸟二级 |园豆:339 | 2015-06-01 11:00

花费我1小时.. 如今还想了解原理的人不多了.

过于执著 | 园豆:339 (菜鸟二级) | 2015-06-01 11:04

@过于执著: 牛!!

隔壁老王来了 | 园豆:99 (初学一级) | 2015-06-01 11:57

@过于执著: 非常感谢您花费宝贵的时间来解决我的问题!在此向您致以最真诚的感谢!

Nopen | 园豆:165 (初学一级) | 2015-06-01 20:53

@过于执著: 虽然我知道原理 但是一个小时就搞定了 你也太厉害了

小眼睛老鼠 | 园豆:2731 (老鸟四级) | 2015-06-02 11:22
其他回答(3)
0

哦,这个轮子已经有了,毕竟你是自学,就不要再发明轮子了,请直接GOOGLE Jquery UI.

或者看这儿: 

https://jqueryui.com/draggable/

https://jqueryui.com/dialog/

爱编程的大叔 | 园豆:30844 (高人七级) | 2015-06-01 09:40

谢谢!但是太复杂 原理难以看懂

支持(0) 反对(0) Nopen | 园豆:165 (初学一级) | 2015-06-01 20:52
0

推荐园子里的一篇博文:Web前端设计模式--制作漂亮的弹出层...

dudu | 园豆:31030 (高人七级) | 2015-06-01 10:18
0

这样的轮子多的很啊,何必自造呢。

http://layer.layui.com/

webaspx | 园豆:1973 (小虾三级) | 2015-06-01 10:27
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册