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