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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1557字，纯文字阅读大概需要3分钟。

内容图文

话不多说，先上需求图

需求：这是一个音频播放的组件，隐藏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 实现左右拖拽元素并且不超过他的父元素的宽度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---