vue实现了左右拖动元素 并且不超过其父元素的宽度

话不多说，先去需求图

需求：这是一个音频播放组件，隐藏音频风格，用js调用脚本方法。目前功能基本实现，但是有一个问题。图片中有一条绿色的开始线和一条红色的结束线。使用这两种线切割音频意味着拖动以获得拖动的比例并将其发送到后端。为此，学习拖放和编码：

Html部分

！-红色和绿色线条-div class=' begin-end-line ' img 3360 src=' http : line green ' alt=' class=' line BG-line ' id=' green ' draggable=' true ' @ mouse down=' move green ' img Section : src=' http : line red ' alt=' class=' line end-line ' id=' red ' draggable=' true ' @ mouse down=' moved '/div方法

moveGreen(e) {让odiv=e.target//获取目标元素//计算鼠标相对于元素let disxx=e . client x-odiv . offsetleft的位置；Document.onmousemove=(e)={ //鼠标按住移动的事件//用鼠标的位置减去鼠标相对于元素的位置，得到元素的位置let left=e . clientx-disX；if(left-6){ return left=-6 } if(left 684){ return left=684 } console . log(左)；//将元素位置绑定到positionX和positionY this.positionX=top//移动当前元素odiv . style . left=left ' px '；};document . onmouseup=(e)={ document . onmousemove=null；document.onmouseup=null};}现在可以自由拖动了

let left=e . client x-DIsX；if(left-6){ return left=-6 } if(left 684){ return left=684 } console . log(左)；让我解释一下这个代码。此代码在拖动时限制左右，以便被拖动的元素不超过父元素。left-6限制左边，left684限制右边。请注意，父元素是相对定位的，而拖动的元素是绝对定位的。最后一次拖动后，只能左右移动(规定只能左右移动)

摘要

以上是边肖给大家介绍的vue实现左右拖动元素，不超过其父元素的宽度。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！