vue中可拖拽div大小

可封装为全局方法在项目中所需要地方直接调用（mixins）

方法：

参数：

1.allBox：最外层第div class；

2.leftBox：最左层第div class；

3.resizeBox：中间div class；

4.rightBox：最右层第div class；

leftMin /rightMin 距离左右2侧最小距离；

leftBox，resizeBox，rightBox设置宽度均需float;

 

*若是在内部容器中，须在最外层添加position: relative,否则会引起跳动，计算距离错误

 

dragDiv(allBox, leftBox, resizeBox, rightBox, leftMin = 200, rightMin = 200) {

         var box = document.getElementsByClassName(allBox);

         var left = document.getElementsByClassName(leftBox);

         var resize = document.getElementsByClassName(resizeBox);

         var right = document.getElementsByClassName(rightBox);

 

         for(let i = 0; i < resize.length; i++) {

            // 鼠标按下事件

            resize[i].onmousedown = function(e) {

               // 颜色改变提醒

               resize[i].style.background = '#818181';

               var startX = e.clientX;

               resize[i].left = resize[i].offsetLeft;

 

               // 鼠标拖动事件

               document.onmousemove = function(e) {

                  var endX = e.clientX;

                  var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

                  var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

 

                  if(moveLen < leftMin) moveLen = leftMin;

                  if(moveLen > maxT - rightMin) moveLen = maxT - rightMin;

 

                  resize[i].style.left = moveLen; // 设置左侧区域的宽度

 

                  for(let j = 0; j < left.length; j++) {

                     left[j].style.width = moveLen + 'px';

                     right[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';

                  }

               };

 

               // 鼠标松开事件

               document.onmouseup = function(evt) {

                  // 颜色恢复

                  resize[i].style.background = '#d6d6d6';

                  document.onmousemove = null;

                  document.onmouseup = null;

                  resize[i].releaseCapture && resize[i].releaseCapture(); // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉

               };

 

               resize[i].setCapture && resize[i].setCapture(); // 该函数在属于当前线程的指定窗口里设置鼠标捕获

               return false;

            };

         }

      },