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 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JqGrid web打印实现代码
May 31 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
Vue的双向数据绑定实现原理解析
Feb 17 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 批量删除数据的方法分析
2009/10/30 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
生产总经理岗位职责
2013/12/19 职场文书
卖车协议书范例
2014/09/16 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
闪闪的红星观后感
2015/06/08 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers