我要评论话不多说，先上需求图
需求：这是一个音频播放的组件，隐藏audio样式，用js调用脚本方法实现，目前功能基本实现，但是有个问题，图中共有一根绿色的begin线和红色的end线，使用这两根线切割音频，意思就是拖拽获取拖拽后的刻度传给后端，为此，去学习了一下拖拽，
上代码：
html部分
<!--红绿线-->
<div class="begin-end-line">
<img :src="linegreen" alt="" class="line bg-line" id="green" draggable="true" @mousedown="movegreen">
<img :src="linered" alt="" class="line end-line" id="red" draggable="true" @mousedown="movered">
</div>
methods部分
movegreen(e) {
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disx = e.clientx - odiv.offsetleft;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientx - disx;
if(left<-6){
return left=-6
}
if (left>684){
return left=684
}
console.log(left);
//绑定元素位置到positionx和positiony上面
this.positionx = top;
//移动当前元素
odiv.style.left = left + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
现在就可以自由的拖动了
let left = e.clientx - disx;
if(left<-6){
return left=-6
}
if (left>684){
return left=684
}
console.log(left);
这段代码我解释一下，此段代码就是给拖动的时候左右做限制，让拖动元素不超过父元素，left<-6是限制左边，left>684限制右边，注意一点就是，父元素为相对定位，拖拽元素为绝对定位
上个拖拽之后效果图（规定只能左右移动）
总结
以上所述是小编给大家介绍的vue 实现左右拖拽元素并且不超过他的父元素的宽度，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论