vue如何實(shí)現(xiàn)左右拖拽元素并且不超過(guò)他的父元素的寬度

這篇文章主要介紹了vue如何實(shí)現(xiàn)左右拖拽元素并且不超過(guò)他的父元素的寬度，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

先上需求圖

需求：這是一個(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)）

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何實(shí)現(xiàn)左右拖拽元素并且不超過(guò)他的父元素的寬度”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!