vue如何实现左右拖拽元素并且不超过他的父元素的宽度-创新互联
这篇文章主要介绍了vue如何实现左右拖拽元素并且不超过他的父元素的宽度，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
公司主营业务：网站设计、
成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。
创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。
创新互联推出
六盘水免费做网站回馈大家。
先上需求图
需求：这是一个音频播放的组件，隐藏audio样式，用js调用脚本方法实现，目前功能基本实现，但是有个问题，图中共有一根绿色的begin线和红色的end线，使用这两根线切割音频，意思就是拖拽获取拖拽后的刻度传给后端，为此，去学习了一下拖拽，
上代码：
html部分
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的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
感谢你能够认真阅读完这篇文章，希望小编分享的“vue如何实现左右拖拽元素并且不超过他的父元素的宽度”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：vue如何实现左右拖拽元素并且不超过他的父元素的宽度-创新互联
本文链接：
http://chengdu.cdxwcx.cn/article/dijdce.html
