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 相关文章推荐
将文本输入框内容加入表中的js代码
Aug 18 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
js回调函数原理与用法案例分析
Mar 04 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新手上路(五)
2006/10/09 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php类自动加载器实现方法
2015/07/28 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
js身份证验证超强脚本
2008/10/26 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python 反向输出字符串的方法
2018/07/16 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python解析含有重复key的json方法
2019/01/22 Python
python3实现猜数字游戏
2020/12/07 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
三八节祝酒词
2015/08/11 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL