vue如何实现左右拖拽元素并且不超过他的父元素的宽度 - 行业资讯

　　介绍

这篇文章主要介绍了vue如何实现左右拖拽元素并且不超过他的父元素的宽度,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

先上需求图

需求:这是一个音频播放的组件,隐藏音频样式,用js调用脚本方法实现,目前功能基本实现,但是有个问题,图中共有一根绿色的开始线和红色的线,使用这两根线切割音频,意思就是拖拽获取拖拽后的刻度传给后端,为此,去学习了一下拖拽,
上代码:

html部分

& lt; !——红绿线——比; 　　,,,,& lt; div 类=癰egin-end-line"比; 　　,,,,,& lt; img https://www.yisu.com/zixun/: src=" lineGreen " alt=" class="行bg-line " id=奥躺笨赏隙?" true " @mousedown=" moveGreen "> 　　:

%20%20

方法部分

%20%20moveGreen%20(e),%20{ 　　,,,let %20odiv =,%20e。target,,,,,//获取目标元素　　,,,//算出鼠标相对元素的位置　　,,,let %20disX =,%20e.clientX 作用;odiv.offsetLeft; 　　,,,document.onmousemove =,%20(e)=祝辞{,,,//鼠标按下并移动的事件　　,,,,//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置　　,,,,let %20left =,%20e.clientX 作用;disX; 　　,,,,如果(left<6)%20{ 　　,,,,,return 左=6 　　,,,,} 　　,,,,if %20(left>%20684)%20{ 　　,,,,,return 左=684 　　,,,,} 　　,,,,console.log(左); 　　,,,,//绑定元素位置到positionX和positionY上面　　,,,,this.positionX =,最高; 　　　　,,,,//移动当前元素　　,,,,odiv.style.left =,%20left %20+,%20&%20#%2039;%20px%20#%2039;; 　　,,,}; 　　,,,document.onmouseup =,%20(e),=祝辞,{ 　　,,,,document.onmousemove =,空; 　　,,,,document.onmouseup =,空; 　　,,,}; 　　以前,,}%20

现在就可以自由的拖动了

%20%20let %20left =,%20e.clientX 作用;disX; 　　,,,,如果(left<6)%20{ 　　,,,,,return 左=6 　　,,,,} 　　,,,,if %20(left>%20684)%20{ 　　,,,,,return 左=684 　　,,,,} 　　,,,,console.log(左),%20

这段代码我解释一下,此段代码就是给拖动的时候左右做限制,让拖动元素不超过父元素,left<六是限制左边,left>%20684年限制右边,注意一点就是,父元素为相对定位,拖拽元素为绝对定位
上个拖拽之后效果图(规定只能左右移动)
%20

%20

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现左右拖拽元素并且不超过他的父元素的宽度”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!