背景：
当加上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>