js 封装拖拽函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>封装拖拽函数</title>
    <style>
        .con{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="con"></div>
    <script>
        var div = document.getElementsByClassName('con')[0];

        drag(div)
        function drag(ele){
            var eleX,
                eleY,
                status = false;
            addEvent(ele,'mousedown',function(e){
                status = true;
                var e = e || window.event;
                ele.style.cursor = "move",
                win = getViewportOffset(),
                w = parseInt(getStyle(ele,'width')),
                h = parseInt(getStyle(ele,'height')),
                eleX = e.clientX - parseInt(getStyle(ele,'left')),//鼠标点击x轴位置 - ele left值
                eleY = e.clientY - parseInt(getStyle(ele,'top'));
                addEvent(document,'mousemove',move);
                addEvent(ele,'mouseup',up);
                stopBubble(e);
                cancelHandler(e);
            });
            function up(e){
                status = false;
                ele.style.cursor = "auto";
                var e = e || window.event;
            }
            function move(e){
                if(!status){return}
                var e = e || window.event,
                    left = eade(e.clientX - eleX,win.w,w),
                    top = eade(e.clientY - eleY,win.h,h);
                    
                // 边界限制
                function eade(e,win,wh){
                    if(e > 0){
                        e = e > win-wh ? win-wh : e
                    }else{
                        e =  0
                    }
                    return e
                }

                ele.style.left = left + 'px';
                ele.style.top = top + 'px';
            }
        }

        // 事件绑定封装
        function addEvent(ele,type,handler){
            if(ele.addEventListener){
                ele.addEventListener(type,handler,false)
            }else if(ele.attchEvent){
                ele.attchEvent('on'+type,function(){
                    handler.call(ele)
                })
            }else{
                ele['on'+type] = handler
            }
        }

        // 获取样式属性封装
        function getStyle(ele,type){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[type]
            }else{
                return ele.currentStyle[type]
            }
        }

        // 阻止事件冒泡
        function stopBubble(e){
            if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble = true
            }
        }

        // 阻止默认事件封装
        function cancelHandler(e){
            if(e.preventDefault){
               e.preventDefault() 
            }else{
                e.returnValue = false
            }
        }

        // 获取窗口尺寸封装
        function getViewportOffset(){
            if(window.innerWidth){
                return {
                    w: window.innerWidth,
                    h: window.innerHeight  
                }
            }else{
                if(document.compatMode == "BackCompat"){
                    return {
                        w: document.body.clinetWidth,
                        h: document.body.clinetHeight  
                    }
                }else{
                    return {
                        w: document.documentElement.clinetWidth,
                        h: document.documentElement.clinetHeight  
                    }
                }
            }
        }
    </script>
</body>
</html>

js 封装拖拽函数_第1张图片

你可能感兴趣的:(JavaScript)