扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现左右拖拽元素并且不超过他的父元素的宽度”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流