vue 实现左右拖拽元素并且不超过他的父元素的宽度


Posted in Javascript onNovember 30, 2018

话不多说,先上需求图

vue 实现左右拖拽元素并且不超过他的父元素的宽度

需求:这是一个音频播放的组件,隐藏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 实现左右拖拽元素并且不超过他的父元素的宽度

总结

以上所述是小编给大家介绍的vue 实现左右拖拽元素并且不超过他的父元素的宽度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
微信小程序实现保存图片到相册功能
Nov 30 #Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php文件上传类的分享
2017/07/06 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js取得url地址参数实例
2013/02/22 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python图片验证码生成代码
2016/07/02 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
大学自我鉴定
2013/12/20 职场文书
关于保护环境的标语
2014/06/09 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
七年级上册生物的课件
2019/08/07 职场文书