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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
MySQL数据源表结构图示
2008/06/05 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JS 表单验证大全
2011/11/23 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
js实现小星星游戏
2020/03/23 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python基础教程之缩进介绍
2014/08/29 Python
基于python编写的微博应用
2014/10/17 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python属于解释型语言么
2020/06/15 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
绘画设计学生的个人自我评价
2013/09/20 职场文书
创业计划书如何编写
2014/02/06 职场文书
学生请假条格式
2014/04/11 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技