实现盒子宽度随鼠标位置而改变

结构与样式

<div class="leftCategory">
      <div class="drag-line"></div>
</div>

.leftCategory {
  position: relative;
  width: 200px;
}
.drag-line{
  position: absolute;
  top:0;
  right:0;
  width: 6px;
  height: 100vh;
  z-index: 99;
  cursor: e-resize;
}           

复制

实现思路

当鼠标在拖动线（drag-line）区域内按下时，监听鼠标移动，获取鼠标移动的实时距离 将这个距离加上

leftCategory

本来的宽度，就是

leftCategory

随着鼠标移动的宽度

代码实现

// 获取元素在页面中的位置（X）
function getElementLeft(element) {
    var actualLeft = element.offsetLeft;   // 获取元素距离父元素的距离
    var current = element.offsetParent;   //这是获取父元素
    while (current !== null) {      //当它上面有元素时就继续执行
      actualLeft += current.offsetLeft;   //这是获取父元素距它的的父元素左上角的距离
      current = current.offsetParent;
    }
    return actualLeft;   
}

//  实现左侧分类树宽度自由改变
function treeAutoWidth(){
    // 获取当前拖动线在body中的位置
    let dragLinePositionX = 0
        // 鼠标实际移动的距离
    let mouseDistance = 0
    let dragLine = document.querySelector('.drag-line')
    let leftCategory = document.querySelector('.leftCategory')
    dragLine.onmousedown=function(e){
        document.onmousemove = function(e){
            dragLinePositionX = getElementLeft(dragLine)+dragLine.clientWidth 
            // 鼠标实际移动的距离 = 鼠标在body的位置减去 拖动线在body中的位置
            mouseDistance = e.x - dragLinePositionX 
            dragLine.style.transform=`translateX(${mouseDistance}px)`
            leftCategory.style.width=`${leftCategory.clientWidth + mouseDistance}px`
        }
        document.onmouseup=function(){
        document.onmouseup=null;
        document.onmousemove=null;
        };
    }
}

export default treeAutoWidth           

复制