vue-拖拽浏览器兼容问题

背景：

当加上draggable="true"时，会导致火狐拖拽出现问题，会触发dragstart事件，然后mousemove和mouseup监听出现问题。但不会影响Chrome浏览器。

解决办法：去掉draggable="true"语句，在火狐中拖拽正常了

demo正确代码：

<template>
  <div class="wrapper">
    <div class="moveBox">
      <div class="leftDiv"></div>
      <div class="lineMoveDiv"
        @mousedown="moveLineFun">
       </div>
      <div class="rightDiv"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftMin: 80, // 左边距最小值
      topMin: 0,
    };
  },
  methods: {
    // 火狐会触发，chrome不会触发
    handleDragStart() {
      console.log('dragstart');
    },
    // 拖拽监听鼠标按下
    moveLineFun(e) {
      console.log('mousedown');
      const that = this;
      const moveBoxObj = document.getElementsByClassName('moveBox')[0]; // 最大的框，自带相对定位属性
      const leftDiv = document.getElementsByClassName('leftDiv')[0]; // 左边的盒子
      const moveObj = document.getElementsByClassName('lineMoveDiv')[0]; // 移动的线条
      const rightDiv = document.getElementsByClassName('rightDiv')[0]; // 右边的盒子
      const moveBoxObjMaxWidth = moveBoxObj.clientWidth; // 得到点击时该line所在大容器的宽
      const moveBoxObjMaxHeight = moveBoxObj.clientHeight; // 得到点击时该line所在大容器的高
      const moveLineObjOffsetLeft = moveObj.offsetLeft; // 得到点击时该line的左边距
      const moveLineObjOffsetTop = moveObj.offsetTop; // 得到点击时该line的上边距
      const moveStartX = e.clientX; // 得到当前鼠标点击的x位置
      const moveStartY = e.clientY; // 得到当前鼠标点击的x位置
      const leftMax = moveBoxObjMaxWidth - that.leftMin; // 左边距最大值
      const topMax = moveBoxObjMaxHeight - moveObj.clientHeight; // 上边距最大值

      // 绑定鼠标移动时的计算
      function moveFun(e1) {
        console.log('move');
        e1.preventDefault();
        const mouseMoveDistance = e1.clientX - moveStartX; // 鼠标滑动距离（正则是往右；负则是往左）
        const mouseMoveDistanceY = e1.clientY - moveStartY; // 鼠标滑动距离（正则是往下；负则是往上）
        moveObj.style.positon = 'absolute'; // 给线条的元素添加绝对定位属性
        let styleLeft = moveLineObjOffsetLeft + mouseMoveDistance; // 左边距 = 线条初始（左边距）位置 + 鼠标滑动的距离
        let styleTop = moveLineObjOffsetTop + mouseMoveDistanceY; // 左边距 = 线条初始（左边距）位置 + 鼠标滑动的距离
        if (styleLeft <= that.leftMin) {
          styleLeft = that.leftMin;
        } else if (styleLeft > leftMax) {
          styleLeft = leftMax;
        }
        if (styleTop <= that.topMin) {
          styleTop = that.topMin;
        } else if (styleTop > topMax) {
          styleTop = topMax;
        }
        moveObj.style.left = `${styleLeft}px`; // 赋值拖动的线的左边距离
        leftDiv.style.width = `${styleLeft}px`; // 赋值左边盒子的宽度
        rightDiv.style.width = `${moveBoxObjMaxWidth - styleLeft - moveObj.clientWidth}px`; // 赋值右边盒字的宽度
        moveObj.style.top = `${styleTop}px`; // 赋值拖动的线的左边距离
      }
      // 取消计算绑定
      function stopFun() {
        console.log('mouseup');
        document.removeEventListener('mousemove', moveFun); // 取消监听事件，鼠标开始移动
        document.removeEventListener('mouseup', stopFun); // 取消监听事件，鼠标停止移动
      }
      document.addEventListener('mousemove', moveFun); // 添加监听事件，鼠标开始移动
      document.addEventListener('mouseup', stopFun); // 添加监听事件，鼠标停止移动
    },
  },
};
</script>
<style lang="less" scoped>
.moveBox {
  position: relative;
  width: 100%;
  height: 600px;
  border: 1px solid red;
  display: flex;
  .leftDiv {
    width: 79px;
    height: 100%;
    background: #438bef;
  }
  .rightDiv {
    width: 119;
    height: 100%;
    background: #d8d528;
    margin-left: 2px;
  }
  .lineMoveDiv {
    width: 40px;
    height: 50px;
    position: absolute;
    left: 80px;
    top: 0;
    background: red;
  }
}
</style>