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