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 Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
深入理解angularjs过滤器
May 25 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue 组件中slot插口的具体用法
2018/04/03 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
vscode 远程调试python的方法
2017/12/01 Python
pytorch forward两个参数实例
2020/01/17 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
美术学专业求职信
2014/07/23 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
地道战观后感300字
2015/06/04 职场文书