Vue中实现拖拽效果

Vue2项目中遇到需求要求页面左侧部分实现拖拽效果

实现效果：

1665739151500

实现代码：

一、使用盒子包裹需要拖拽的区域，并绑定ref

 二、使用$ref获取DOM信息 具体代码（这个方法在mounted里调用即可）

// 左右拖拽左侧结构
    resizeFn() {
      let element = this.$refs.leftBox;
      let resize = element.querySelector(".resize");
      resize.style["right"] = "0";
      resize.addEventListener("mousedown", function (e) {
        let startX = e.pageX;
        //左侧盒子 元素的width+元素的padding+边框的宽度
        let width = element.offsetWidth;
        resize.classList.add("active");
        document.addEventListener("mousemove", move);
        let timer = null;
        function move(e) {
          let moveX; // 左右这里切换计算顺序即可
          // if(position === 'left') moveX = startX - e.pageX
          moveX = e.pageX - startX;
          clearTimeout(timer);
          timer = setTimeout(() => {
            element.style.width = width + moveX + "px";
          }, 5);
        }
        document.addEventListener(
          "mouseup",
          function () {
            document.removeEventListener("mousemove", move);
            resize.classList.remove("active");
          },
          { once: true }
        );
      });
    },