js窗口拖拽

最新推荐文章于 2022-11-03 11:07:02 发布

往地上就是一躺

最新推荐文章于 2022-11-03 11:07:02 发布

阅读量415

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{position:absolute; left:100px; top:100px; padding:5px; width: 300px;height: 200px;background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
        .bar{width:100%;height: 30px;background: #ccc; }
    </style>
</head>
<body>
    <div id="box" class="box"><div id="bar" class="bar">拖拽</div></div>

    <script src="d2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var oBox = document.getElementById("box");
        var oBar = document.getElementById("bar");
        startDrag("bar", oBox,true,function(left,top){
            // console.log(left);
        });
    </script>
</body>
</html>

/**
 * 纯js实现多div拖拽
 * @param bar, 拖拽触柄
 * @param target, 可拖动窗口
 * @param inWindow, 为true时只能在屏幕范围内拖拽
 * @param callback, 拖拽时执行的回调函数。包含两个参数，target的left和top
 * @returns {*}
 * @private
 */
var startDrag = function(bar,target,inWindow,callback){
    (function(bar,target,inWindow,callback){
        var D = document,
              DB = document.body,
              params = {
            top: 0,
            left: 0,
            currentX: 0,
            currentY: 0
              };
        bar = (typeof bar == "string")?D.getElementById(bar):bar;
        target = (typeof target == "string")?D.getElementById(target):target;
        bar.style.cursor = "move";
        bindHandler(bar,"mousedown",function(e){
            e.preventDefault();
            if(!e){
                e = window.event;
                bar.onselectstart = function(){
                    return false;
                }
            }
            params.top = target.offsetTop;
            params.left = target.offsetLeft;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
            var stopDrag = function(){
                removeHander(bar,"mousemove",beginDrag);
                removeHander(bar,"mouseup",stopDrag);
            };
            var beginDrag = function(e){
                var evt = e?e:window.event;
                var nowX = e.clientX,nowY = e.clientY;
                var disX = nowX - params.currentX,disY = nowY - params.currentY;
                var left = parseInt(params.left) + disX,top = parseInt(params.top) + disY;
                if(inWindow){
                    var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
                    var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
                    var maxTop = h - target.offsetHeight;
                    var maxLeft = w - target.offsetWidth;
                    if(left <= 0){
                        left = 0;
                    }
                    if(left >= maxLeft){
                        left = maxLeft;
                    }
                    if(top <= 0){
                        top = 0;
                    }
                    if(top >= maxTop){
                        top = maxTop;
                    }
                }
                target.style.left = left + "px";
                target.style.top = top + "px";
                if(typeof callback == "function"){
                    callback(left,top);
                }
            };
            bindHandler(bar,"mousemove",beginDrag);
            bindHandler(document,"mouseup",stopDrag);
        });


        function bindHandler(elem,type,hander){
            if(window.addEventListener){
                elem.addEventListener(type,hander,false);
            }else if(window.attachEvent){
                elem.attachEvent("on"+type,handler);
            }
        }
        function removeHander(elem,type,hander){
            if(window.removeEventListener){
                elem.removeEventListener(type,hander);
            }else if(window.detachEvent){
                ele.detachEvent("on"+type,hander);
            }
        }
    })(bar,target,inWindow,callback);
}

效果：
这里写图片描述
完整例子：http://pan.baidu.com/s/1jI2UjHG

往地上就是一躺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js窗口拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{position:absolute; left:100px; top:100px; padding:5px; width: 300px;height: 200px
复制链接

扫一扫