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

更新時(shí)間：2018年11月30日 11:43:39 作者：RjwWorle

這篇文章主要介紹了vue 實(shí)現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下

話不多說，先上需求圖

需求：這是一個(gè)音頻播放的組件，隱藏audio樣式，用js調(diào)用腳本方法實(shí)現(xiàn)，目前功能基本實(shí)現(xiàn)，但是有個(gè)問題，圖中共有一根綠色的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)元素不超過父元素，left<-6是限制左邊，left>684限制右邊，注意一點(diǎn)就是，父元素為相對(duì)定位，拖拽元素為絕對(duì)定位
上個(gè)拖拽之后效果圖（規(guī)定只能左右移動(dòng)）

總結(jié)

以上所述是小編給大家介紹的vue 實(shí)現(xiàn)左右拖拽元素并且不超過他的父元素的寬度，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue
拖拽

相關(guān)文章

vue + vuex todolist的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
react和vue的事件處理差異詳解
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3初始化如何調(diào)用函數(shù)
這篇文章主要介紹了Vue3初始化如何調(diào)用函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue中的scoped實(shí)現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
vue如何使用 jsplumb 生成流程圖
文章介紹了如何在Vue項(xiàng)目中使用jsPlumb庫來生成流程圖,文章提供了兩個(gè)簡單的示例代碼,展示了如何定義流程圖的數(shù)據(jù)字段和如何配置連線樣式,最后,文章鼓勵(lì)讀者繼續(xù)探索更多關(guān)于vue和jsPlumb的使用技巧,感興趣的朋友一起看看吧
2025-02-02
vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下
2018-09-09
vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式
這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
詳解vue使用$http服務(wù)端收不到參數(shù)
這篇文章主要介紹了vue使用$http服務(wù)端收不到參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05