会话框拖拽效果实现

来源：互联网发布：物理知乎编辑：程序博客网时间：2024/06/06 10:42

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41801415

遇到这需求是想模仿网页版QQ，多个会话框时会叠一起，需要有拖拽功能。

网上找到了一篇代码（原文地址），但其中有少数地方边界处理没做好，计算也有一点问题，修正了下。原文所说的弊端未解决。

界面代码如下：

<!DOCTYPE html><html>    <head>        <title>Test</title>        <style type="text/css" >            html,body            {                height:100%;                width:100%;                padding:0;                margin:0;            }                        .dialog            {                width:250px;                height:250px;                position:absolute;                background-color:#ccc;                -webkit-box-shadow:1px 1px 3px #292929;                -moz-box-shadow:1px 1px 3px #292929;                box-shadow:1px 1px 3px #292929;                z-index:1;            }                        .dialog-title            {                color:#fff;                background-color:#404040;                font-size:12pt;                font-weight:bold;                padding:4px 6px;                cursor:move;            }                        .dialog-content            {                padding:4px;            }        </style>    </head>    <body>        <div id="dlgTest" class="dialog">            <div class="dialog-title">Dialog</div>            <div class="dialog-content">                This is a draggable test.            </div>        </div>    </body></html>

JS代码

var Dragging = function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null    var draggingObj = null; //dragging Dialog    var diffX = 0;    var diffY = 0;        function mouseHandler(e){        switch(e.type){            case 'mousedown':                draggingObj = validateHandler(e);//验证是否为可点击移动区域                if(draggingObj != null){                    diffX = e.clientX - draggingObj.offsetLeft;                    diffY = e.clientY - draggingObj.offsetTop;                }                break;                        case 'mousemove':                if(draggingObj){                    draggingObj.style.left = (e.clientX - diffX) + 'px';                    draggingObj.style.top = (e.clientY - diffY) + 'px';                }                break;                        case 'mouseup':                draggingObj  = null;                diffX = 0;                diffY = 0;                break;        }    };        return {        enable:function(){            document.addEventListener('mousedown',mouseHandler);            document.addEventListener('mousemove',mouseHandler);            document.addEventListener('mouseup',mouseHandler);        },        disable:function(){            document.removeEventListener('mousedown',mouseHandler);            document.removeEventListener('mousemove',mouseHandler);            document.removeEventListener('mouseup',mouseHandler);        }    }}function getDraggingDialog(e){    var target = e.target;    while(target && target.className.indexOf('dialog-title') == -1){        target = target.offsetParent;    }    if(target != null){        return target.offsetParent;    }else{        return null;    }}// 启动拖拽效果Dragging(getDraggingDialog).enable();

0 0