渡一教育公开课web前端开发JavaScript精英课学习笔记（二十五）JavaScript 拖拽方框-CSDN博客

本文链接：https://blog.csdn.net/jingliuting/article/details/88592444
拖拽方框

<!DOCTYPE html>
<html>
<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>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: black;
        }

        .container {
            margin: 0;
            padding: 0;
            position: absolute;
            width: 200px;
            height: 200px;
            left: 200px;
            top: 200px;
            cursor:move;
            color:white;
            line-height:200px;
            text-align:center;
        }

        .y {
            position: absolute;
            background-color: yellow;
        }

        .g {
            position: absolute;
            background-color: green;
        }

        .t {
            width: 100%;
            left: 0;
            top: 0;
            cursor:n-resize;
        }

        .r {
            height: 100%;
            right: 0;
            top: 0;
            cursor: e-resize;
        }

        .b {
            width: 100%;
            left: 0;
            bottom: 0;
            cursor:n-resize;
        }

        .l {
            height: 100%;
            left: 0;
            top: 0;
            cursor: e-resize;
        }

        .tr {
            right: 0;
            top: 0;
            cursor:ne-resize;
        }

        .rb {
            right: 0;
            bottom: 0;
            cursor:nw-resize;
        }

        .bl {
            left: 0;
            bottom: 0;
            cursor:ne-resize;
        }

        .lt {
            left: 0;
            top: 0;
            cursor:nw-resize;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="t y"></div>
        <div class="r y"></div>
        <div class="b y"></div>
        <div class="l y"></div>
        <div class="tr g"></div>
        <div class="rb g"></div>
        <div class="bl g"></div>
        <div class="lt g"></div>

        移动方块、调整大小
        
    </div>
    <script>
        var width = 1;
        var container = document.getElementsByClassName('container')[0];

        init();

        function init() {
            var els = document.querySelectorAll('.container div');
            for (var i = 0; i < els.length; i++) {
                if(els[i].className.indexOf('l') >= 0 || els[i].className.indexOf('r') >= 0){
                    els[i].style.width = width + 'px';
                }
                if(els[i].className.indexOf('t') >= 0 || els[i].className.indexOf('b') >= 0){
                    els[i].style.height = width + 'px';
                }
                drags(els[i]);
            }
            moveContainer();
        }

        function drags(el) {

            el.addEventListener('mousedown',elsDown);
            function elsDown(ev) {
                ev.stopPropagation();
                var coffsetW = container.offsetWidth;
                var coffsetH = container.offsetHeight;

                var coffsetL = container.offsetLeft;
                var coffsetT = container.offsetTop;

                var elclientX = ev.clientX;
                var elclientY = ev.clientY;

                document.addEventListener('mousemove',elsMove);
                document.addEventListener('mouseup',elsUp);
                
                function elsMove(ev) {
                    // ev.stopPropagation();
                    if (el.className.indexOf('t') >= 0) {
                        if(coffsetH - (ev.clientY - elclientY) >= width * 2){
                        container.style.top = ev.clientY - elclientY + coffsetT + 'px';
                        container.style.height = coffsetH - (ev.clientY - elclientY) + 'px';
                        }
                    }
                    if (el.className.indexOf('b') >= 0) {
                        if(coffsetH + (ev.clientY - elclientY) >= width * 2){
                        container.style.height = coffsetH + (ev.clientY - elclientY) + 'px';
                        }
                    }
                    if (el.className.indexOf('l') >= 0) {
                        if(coffsetW - (ev.clientX - elclientX) >= width * 2){
                        container.style.left = ev.clientX - elclientX + coffsetL + 'px';
                        container.style.width = coffsetW - (ev.clientX - elclientX) + 'px';
                        }
                    }
                    if (el.className.indexOf('r') >= 0) {
                        if(coffsetW + (ev.clientX - elclientX) >= width * 2){
                        container.style.width = coffsetW + (ev.clientX - elclientX) + 'px';
                        }
                    }
                    container.style.lineHeight = container.offsetHeight + 'px';
                }
                function elsUp(ev){
                    document.removeEventListener('mousemove',elsMove);
                    document.removeEventListener('mouseup',elsUp);
                    document.removeEventListener('mousedown',elsDown);
                }
             }
        }

        function moveContainer(){
            container.addEventListener('mousedown',containerDown);
           function containerDown(ev){
                var cTop = container.offsetTop;
                var cLeft = container.offsetLeft;
                var cClientX = ev.clientX;
                var cClientY = ev.clientY;
                var _self = this;
                document.addEventListener('mousemove',containerMove);
                document.addEventListener('mouseup',containerUp);
                function containerMove(ev){
                    _self.style.top = (ev.clientY - cClientY + cTop) + 'px';
                    _self.style.left = (ev.clientX - cClientX + cLeft) + 'px';
                    }
                function containerUp(ev){
                    document.removeEventListener('mousemove',containerMove);
                    document.removeEventListener('mouseup',containerUp);
                    document.removeEventListener('mousedown',containerDown);
                    
                    }
            }
        }
    </script>
</body>
</html>