vue 实现左右拖拽元素并且不超过他的父元素的宽度

 更新时间:2018年11月30日 11:43:39   作者:RjwWorle  
这篇文章主要介绍了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如何截取字符串

    vue如何截取字符串

    这篇文章主要介绍了vue如何截取字符串,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 在vue-cli中引入lodash.js并使用详解

    在vue-cli中引入lodash.js并使用详解

    今天小编就为大家分享一篇在vue-cli中引入lodash.js并使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • VUE + UEditor 单图片跨域上传功能的实现方法

    VUE + UEditor 单图片跨域上传功能的实现方法

    这篇文章主要介绍了VUE + UEditor 单图片跨域上传功能的实现方法,需要的朋友参考下
    2018-02-02
  • vue把输入框的内容添加到页面的实例讲解

    vue把输入框的内容添加到页面的实例讲解

    在本篇文章里小编给大家整理的是关于vue把输入框的内容添加到页面的实例以及相关知识点,需要的朋友们学习下。
    2019-11-11
  • vue 文件切片上传的项目实现

    vue 文件切片上传的项目实现

    本文主要介绍了vue 文件切片上传的项目实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    这篇文章主要介绍了基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果,需要的朋友可以参考下
    2018-01-01
  • Vue程序调试的方法

    Vue程序调试的方法

    这篇文章主要介绍了VUE程序调试的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • 详解vue-cli快速构建vue应用并实现webpack打包

    详解vue-cli快速构建vue应用并实现webpack打包

    这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue项目多环境配置(.env)的实现

    vue项目多环境配置(.env)的实现

    最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下
    2021-07-07
  • vue脚手架搭建过程图解

    vue脚手架搭建过程图解

    vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node。下面通过图文并茂的形式给大家介绍vue脚手架搭建过程图解,感兴趣的朋友一起看看吧
    2018-06-06

最新评论