js高级拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box{
        width: 100px;
        height: 100px;
        background: blue;
        position: absolute;
        cursor: move;
    }
</style>
<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    box.onmousedown = function(e){
        var e = e || event; //获取event对象;
        var X = e.clientX - box.offsetLeft;//计算鼠标按下的时候到盒子的边界左边界距离;
        var Y = e.clientY - box.offsetTop;//计算鼠标按下的时候到盒子的边界上边界距离;
        document.onmousemove = function(e){
            var e = e || event;
            var moveX = e.clientX - X; //计算盒子被移动后到浏览器左边边界的距离;
            var moveY = e.clientY - Y; //计算盒子被移动后到浏览器上边边界的距离;
            var winW = document.documentElement.clientWidth;  //计算机的可见宽度;
            var winH = document.documentElement.clientHeight; //计算机的可见高度;
            var maxW = winW - box.offsetWidth;  //减去盒子的宽度,浏览器最大可见宽度;
            var maxH = winH - box.offsetHeight; //减去盒子的高度,浏览器最大可见高度;
                if(moveX < 0){ //判断左边边距小于0,边距等于0;
                    moveX = 0;
                }
                if(moveY < 0){ //判断上边边距小于0,边距等于0;
                    moveY = 0;
                }
                if(moveX > maxW){ //判断右边边距大于最大值,边距等于最大边距;
                    moveX = maxW;
                }
                if(moveY > maxH){ //判断下边边距大于最大值,边距等于最大边距;
                    moveY = maxH;
                }
                box.style.left = moveX + "px"; //设置被移动后左边界的距离;
                box.style.top = moveY + "px";  //设置被移动后上边距的距离;
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null; //清空被移动的函数;
    }
</script>
</html>
猜你喜欢
