vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
更新時間：2018年11月30日 11:43:39 作者：RjwWorle
這篇文章主要介紹了vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下
話不多說，先上需求圖
需求：這是一個音頻播放的組件，隱藏audio樣式，用js調(diào)用腳本方法實現(xiàn)，目前功能基本實現(xiàn)，但是有個問題，圖中共有一根綠色的begin線和紅色的end線，使用這兩根線切割音頻，意思就是拖拽獲取拖拽后的刻度傳給后端，為此，去學(xué)習(xí)了一下拖拽，
上代碼：
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; //獲取目標(biāo)元素
//算出鼠標(biāo)相對元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = (e)=>{ //鼠標(biāo)按下并移動的事件
//用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置，得到元素的位置
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;
//移動當(dāng)前元素
odiv.style.left = left + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
現(xiàn)在就可以自由的拖動了
let left = e.clientX - disX;
if(left<-6){
return left=-6
}
if (left>684){
return left=684
}
console.log(left);
這段代碼我解釋一下，此段代碼就是給拖動的時候左右做限制，讓拖動元素不超過父元素，left<-6是限制左邊，left>684限制右邊，注意一點就是，父元素為相對定位，拖拽元素為絕對定位
上個拖拽之后效果圖（規(guī)定只能左右移動）
總結(jié)
以上所述是小編給大家介紹的vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天小編就為大家分享一篇在vue-cli中引入lodash.js并使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法
這篇文章主要介紹了VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法，需要的朋友參考下2018-02-02
在本篇文章里小編給大家整理的是關(guān)于vue把輸入框的內(nèi)容添加到頁面的實例以及相關(guān)知識點，需要的朋友們學(xué)習(xí)下。2019-11-11
本文主要介紹了vue?文件切片上傳的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果
這篇文章主要介紹了基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07
vue腳手架是個好東西，能夠快速搭建vue單頁面應(yīng)用，vue是基于node環(huán)境的，所以要先安裝node。下面通過圖文并茂的形式給大家介紹vue腳手架搭建過程圖解，感興趣的朋友一起看看吧2018-06-06