div拖拽代码优化

通过函数进行代码优化

目的：

1. 实现div拖动
2. shift按键只改变top或left （div 坐标某方向变化）
3. 四个方向拉伸（div 宽或高变化）
4. 四个角拉伸 （div 宽高同时变化）

优化前代码思路：

1. 拖动和某方向上的位置变化只能单独写
2. 四个方向拉伸时，分别设置
3. 四个角拉伸变化时，分别设置
   缺点：重复代码过多，占用资源多

优化思路：
定义函数，使div通过类名进行变化

优化后代码：

<div class="all">
        <p>拖我就走</p>
        <div class="top handler"></div>
        <div class="bottom handler"></div>
        <div class="left handler"></div>
        <div class="right handler"></div>
        <div class="top_left dot"></div>
        <div class="bottom_left dot"></div>
        <div class="top_right dot"></div>
        <div class="bottom_right dot"></div>
    </div>
 // 拖着就走 && 实现某方向移动
        function go() {
            var p = document.querySelector('p');
            var all = document.getElementsByClassName('all')[0];
            p.onmousedown = function (evt) {
                var e = evt || window.event;
                // 获取光标点击时 盒子的坐标&光标的坐标
                var allX = all.offsetLeft;
                var allY = all.offsetTop;
                var mouseX = evt.clientX;
                var mouseY = evt.clientY;
                window.onmousemove = function (evt) {
                    // 获取光标当前位置 计算移动距离
                    var currentX = evt.clientX;
                    var currentY = evt.clientY;
                    var chaX = currentX - mouseX;
                    var chaY = currentY - mouseY;
                    all.style.left = allX + chaX + 'px';
                    all.style.top = allY + chaY + 'px';

                    // 按住shift键，只实现鼠标偏移量大的方向的改变
                    if (evt.shiftKey && chaX > chaY) {
                        all.style.left = allX + chaX + 'px';
                        all.style.top = allY + 'px';
                    }
                    if (evt.shiftKey && chaX < chaY) {
                        all.style.left = allX + 'px';
                        all.style.top = allY + chaY + 'px';
                    }
                }
                window.onmouseup = function (evt) {
                    window.onmousemove = null;
                    window.onmouseup = null;
                }
            }
        }
        go()

        // 盒子拖拽
        function resize(dir) {
            var side = document.getElementsByClassName(dir)[0];
            var all = document.querySelector('.all')
            // 设置盒子变化条件（布尔值）
            var isLeft = dir.indexOf('left') !== -1 ? true : false;
            var isRight = dir.indexOf('right') !== -1 ? true : false;
            var isTop = dir.indexOf('top') !== -1 ? true : false;
            var isBottom = dir.indexOf('bottom') !== -1 ? true : false;

            side.onmousedown = function (evt) {
                var allX = all.offsetWidth;
                var allY = all.offsetHeight;
                var mouseX = evt.clientX;
                var mouseY = evt.clientY;
                var allTop = all.offsetTop;
                var allLeft = all.offsetLeft;
                window.onmousemove = function (evt) {
                    var x = evt.clientX;
                    var y = evt.clientY;
                    var chaX = x - mouseX;
                    var chaY = y - mouseY;
                    // 取消盒子宽高改变时默认改变右边和下边位置
                    evt.preventDefault()
                    // 设置点击不同边框时的变化
                    if (isLeft) {
                        all.style.left = allLeft + chaX + 'px';
                        all.style.width = allX - chaX + 'px';
                    }
                    if(isRight){
                        all.style.width = allX + chaX + 'px';
                    }
                    if(isTop){
                        all.style.top = allTop + chaY + 'px';
                        all.style.height = allY - chaY + 'px'
                    }
                    if(isBottom){
                        all.style.height = allY + chaY + 'px';
                    }

                    window.onmouseup = function (evt) {
                        window.onmousemove = null;
                        window.onmouseup = null;
                    }
                }
            }
        }
        resize('top')
        resize('bottom')
        resize('left')
        resize('right')
        resize('bottom_left')
        resize('bottom_right')
        resize('top_left')
        resize('top_right')

    </script>