HTML可拖拽模拟对话框

最新推荐文章于 2023-10-10 16:42:49 发布

iteye_11613

最新推荐文章于 2023-10-10 16:42:49 发布

阅读量675

点赞数

分类专栏： HTML 文章标签：前端 javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11613/article/details/82639891

版权

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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;
            margin:10px;
        }

        .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>
<script type="text/javascript">
    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();
</script>
</body>
</html>