BOX（拖拽盒子）

js画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOX（拖拽盒子）</title>
    <style>
        .box{
            position:absolute;
            border:2px solid #666;
        }
        .topLeft,.topRight,.bottomLeft,.bottomRight{
            position: absolute;
            width:10px;
            height:10px;
            z-index:100;
            border:2px solid #666;
            background-color: white;
        }
        .topLeft,.topRight{
            top:-5px;
        }
        .bottomLeft,.bottomRight{
            bottom:-5px;
        }
        .topLeft,.bottomLeft{
            left:-5px;
        }
        .topRight,.bottomRight{
            right:-5px;
        }
        .topLeft{
            cursor:nw-resize;
        }
        .topRight{
            cursor:ne-resize;
        }
        .bottomLeft{
            cursor:sw-resize;
        }
        .bottomRight{
            cursor:se-resize;
        }
    </style>
</head>
<body>
<div class="box" id="box" style="100px;height:100px;top:100px;left:100px;">
    <div class="topLeft"></div>
    <div class="topRight"></div>
    <div class="bottomLeft"></div>
    <div class="bottomRight"></div>
</div>
<script>
    //获取公用节点
    var box = document.getElementById("box");
    var topLeft = document.getElementsByClassName("topLeft")[0];
    var topRight = document.getElementsByClassName("topRight")[0];
    var bottomLeft = document.getElementsByClassName("bottomLeft")[0];
    var bottomRight = document.getElementsByClassName("bottomRight")[0];
    var position = {x:100,y:100};//位置数据
    var minWidHeg = 25;//拖拽最小宽度
    window.onload = function() {
        //拖拽整个框体
        box.onmousedown = function(ev) {
            var disX=ev.clientX-box.offsetLeft;
            var disY=ev.clientY-box.offsetTop;
            document.onmousemove = function(ev) {
                position.x = ev.clientX-disX;
                position.y = ev.clientY-disY;
                box.style.left = position.x + "px";
                box.style.top = position.y + "px";
            };
            document.onmouseup = function() {
                document.onmousemove = null;
            };
            return false;
        };
        //拖拽左上角
        topLeft.onmousedown = function(ev) {
            position.x = ev.clientX;
            position.y = ev.clientY;
            document.onmousemove = function(ev) {
                var addHeight = position.y - ev.clientY;
                var addLength = position.x - ev.clientX;
                var height = parseInt(box.style.height) + addHeight;
                var length = parseInt(box.style.width) + addLength;
                if(height>minWidHeg){
                    position.y = ev.clientY;
                    box.style.height = height + "px";
                    box.style.top = position.y + "px";
                }
                if(length>minWidHeg){
                    position.x = ev.clientX;
                    box.style.width = length + "px";
                    box.style.left = position.x + "px";
                }
            };
            document.onmouseup = function() {
                document.onmousemove = null;//移开清除
            };
            ev.stopPropagation();//阻止事件冒泡
            return false;
        };
        //拖拽右上角
        topRight.onmousedown = function(ev) {
            position.x = ev.clientX;
            position.y = ev.clientY;
            document.onmousemove = function(ev) {
                var addHeight = position.y - ev.clientY;
                var addLength = position.x - ev.clientX;
                var height = parseInt(box.style.height) + addHeight;
                var length = parseInt(box.style.width) - addLength;
                if(height>minWidHeg){
                    position.y = ev.clientY;
                    box.style.height = height + "px";
                }
                if(length>minWidHeg){
                    position.x = ev.clientX;
                    box.style.top = position.y + "px";
                    box.style.width = length + "px";
                }

            };
            document.onmouseup = function() {
                document.onmousemove = null;
            };
            ev.stopPropagation();
            return false;
        };
        //拖拽左下角
        bottomLeft.onmousedown = function(ev) {
            position.x = ev.clientX;
            position.y = ev.clientY;
            document.onmousemove = function(ev) {
                var addHeight = position.y - ev.clientY;
                var addLength = position.x - ev.clientX;
                var height = parseInt(box.style.height) - addHeight;
                var length = parseInt(box.style.width) + addLength;
                if(height>minWidHeg){
                    position.y = ev.clientY;
                    box.style.height = height + "px";
                }
                if(length>minWidHeg){
                    position.x = ev.clientX;
                    box.style.width = length + "px";
                    box.style.left = position.x + "px";
                }
            };
            document.onmouseup = function() {
                document.onmousemove = null;
            };
            ev.stopPropagation();
            return false;
        };
        //拖拽右下角
        bottomRight.onmousedown = function(ev) {
            position.x = ev.clientX;
            position.y = ev.clientY;
            document.onmousemove = function(ev) {
                var addHeight = position.y - ev.clientY;
                var addLength = position.x - ev.clientX;
                var height = parseInt(box.style.height) - addHeight;
                var length = parseInt(box.style.width) - addLength;
                if(height>minWidHeg){
                    position.y = ev.clientY;
                    box.style.height = height + "px";
                }
                if(length>minWidHeg){
                    position.x = ev.clientX;
                    box.style.width = length + "px";
                }
            };
            document.onmouseup = function() {
                document.onmousemove = null;
            };
            ev.stopPropagation();
            return false;
        };
    };
</script>
</body>
</html>
相关推荐
