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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
简单分析javascript中的函数
Sep 10 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
javaScript中indexOf用法技巧
Nov 26 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
bootstrap响应式表格实例详解
2017/05/15 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
css3的transition属性详解
2014/12/15 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
大专生简历的自我评价
2013/11/26 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript