(JS\VUE\REACT) div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度

一、div拖拽移动+控制大小（高度、宽度）

1.演示数据

        

            

                拖拽
            
            

                测试数据01
            
            

             	测试数据02
            
            
 
        
    

2.初始化（页面生成时调用）

    var box = document.getElementById('box')
    var drag = document.getElementById('drag')
    var scale = document.getElementById('scale')
    //调用拖拽方法
    this.dragTop(drag)
    //调用缩放方法
    this.scaleTool(drag, scale, box)

3.CSS样式

#box {
     width: 100%;
    height: 1000px;
    position: relative;
}
#title{
    width: 100%;
    background-color: pink;
    text-align: center;
}
#drag {
    width: 200px;
    height: 200px;
    position: relative;
    background: #d6d4d9;
    cursor: move;
}
 
#scale {
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: #333;
    cursor:nesw-resize; 
    right: 0;
    top: 0;
    overflow: hidden;
}
.inp{
    width: 100%;
}

4.js方法

//拖拽方法
     dragTop(node) {
        //鼠标落下
        node.onmousedown = function (ev) {
            //浏览器兼容处理
            var e = ev || window.event;
            //点击鼠标记录当前位置
            //水平方向 = 鼠标左边距离 - 被拖拽元素距离左边距离
            var offsetX = e.clientX - node.offsetLeft;
            //垂直方向 = 鼠标上边距离 - 被拖拽元素距离上边距离
            var offsetY = e.clientY - node.offsetTop;
            //鼠标移动在document上
            document.onmousemove = function (ev) {
                //当前鼠标事件对象
                var e = ev || window.event;
                //拖拽元素左边距离 = 当前鼠标左边距离 - 距离左边距离
                var currentLeft = e.clientX - offsetX;
                //拖拽元素上边距离 = 当前鼠标上边距离 - 距离上边距离
                var currentTop = e.clientY - offsetY;
                //限制出界
                if (currentLeft <= 0) {
                    currentLeft = 0;
                }
                //窗口宽度
                var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                
                if (currentLeft >= windowWidth - node.offsetWidth) {
                    currentLeft = windowWidth - node.offsetWidth
                }
                if (currentTop <= 0) {
                    currentTop = 0;
                }
                //窗口高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                if (currentTop >= windowHeight - node.offsetHeight) {
                    currentTop = windowHeight - node.offsetHeight
                }
                node.style.left = currentLeft+'px';
                node.style.top = currentTop+'px';
            }
            //鼠标抬起取消拖拽
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    },
    // 缩放
     scaleTool(drag, scale, box) {
      
        scale.onmousedown = function (e) {
            //阻止冒泡 避免缩放触发移动事件
            e.stopPropagation()
            // 取消事件的默认动作
            e.preventDefault()
            // 定义position
            var position = {
                'w': drag.offsetWidth, // 被缩放元素的offsetWidth
                'h': drag.offsetHeight, // 被缩放元素的offsetHeight
                'x': e.clientX, // 当前窗口鼠标指针的水平坐标
                 'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
            }
           console.log(box.offsetWidth);
            drag.onmousemove = function (ev) {
                ev.preventDefault()
                // 设置最大缩放为30*30 Math.max取最大值 
                var w = Math.max(200, ev.clientX - position.x + position.w)
                var h = Math.max(200, ev.clientY - position.y + position.h)
           
                // 设置最大的宽高
                w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
                 h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
                drag.style.width = w + 'px';
                drag.style.height = h + 'px';
            }
            // 鼠标离开和抬起取消缩放
            drag.onmouseup = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
            drag.onmouseleave = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
        }
    },

二、单独只控制div的宽度

1.演示数据

      

            账户：
      
    

2.初始化（页面生成时调用）

this.inserted()

3.js方法

inserted (el) {
        const dragDom = document.getElementById('myDiv');
        dragDom.style.cursor = "e-resize";
        dragDom.onmousedown = (e) => {
          var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX;
          const w = dragDom.clientWidth;
          const minW = 200;
          const maxW = windowWidth - dragDom.offsetWidth;
          var nw;
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            // 改变当前元素宽度，不可超过最小最大值
            nw = w + l;
            nw = nw < minW ? minW : nw;
            nw = nw > maxW ? maxW : nw;
            dragDom.style.width = `${nw}px`;
          };

          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },