欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-19 19:43:57
话不多说,先上需求图 需求:这是一个音频播放的组件,隐藏audio样式,用js调用脚本方法实现,目前功能基本实现,但是有个问题,图*有一根绿色的begin线和红色的...

话不多说,先上需求图

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 实现左右拖拽元素并且不超过他的父元素的宽度,希望对大家有所帮助