会话框拖拽效果实现

最新推荐文章于 2022-04-04 00:35:35 发布

dbd199713

最新推荐文章于 2022-04-04 00:35:35 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/sysuzjz/p/4289311.html

版权

遇到这需求是想模仿网页版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();

转载于:https://www.cnblogs.com/sysuzjz/p/4289311.html