成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用Vue操作DIV的方法

小編給大家分享一下使用Vue操作DIV的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都網(wǎng)站制作、網(wǎng)站設(shè)計,成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)公司已向1000多家企業(yè)提供了,網(wǎng)站設(shè)計,網(wǎng)站制作,網(wǎng)絡(luò)營銷等服務(wù)!設(shè)計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。

效果圖

使用Vue操作DIV的方法

demo1.gif

分清clientY pageY screenY layerY offsetY的區(qū)別

在我們想要做出拖拽這個效果的時候，我們需要分清這幾個屬性的區(qū)別，這幾個屬性都是計算鼠標(biāo)點擊的偏移值，我們需要對其進(jìn)行了解才可以繼續(xù)實現(xiàn)我們的拖拽效果

clientY 指的是距離可視頁面左上角的距離
pageY 指的是距離可視頁面左上角的距離(不受頁面滾動影響)
screenY 指的是距離屏幕左上角的距離
layerY 指的是找到它或它父級元素中最近具有定位的左上角距離
offsetY 指的是距離它自己左上角的距離
一張圖帶大家簡單了解了解

使用Vue操作DIV的方法

區(qū)別

在我們簡單了解完這些個屬性以后，有幾個屬性需要分清。


 相同點		不同點
clientY距離頁面左上角距離受頁面滾動的影響
pageY距離頁面左上角的距離不受頁面滾動影響

相同點不同點
layerY距離元素的左上角距離受元素的定位的影響，會從本元素往上找到第一個定位的元素的左上角
offsetY距離元素左上角的距離計算相對于本元素的左上角，不在乎定位問題，計算的是內(nèi)交點。是IE瀏覽器的特有屬性

使用Vue操作DIV的方法

layerY與offsetY區(qū)別

實現(xiàn)拖拽功能

我們既然熟悉了這幾個偏移屬性的意思，那么我們就進(jìn)入我們的重點。話不多說直接上代碼

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*設(shè)置一下背景*/
  }
</style>
<body>
  <p id="app" @mousedown="move">    <!--綁定按下事件-->
    {{positionX}}
    {{positionY}}
  </p>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let op = e.target;    //獲取目標(biāo)元素
      
      //算出鼠標(biāo)相對元素的位置
      let disX = e.clientX - op.offsetLeft;
      let disY = e.clientY - op.offsetTop;
      document.onmousemove = (e)=>{    //鼠標(biāo)按下并移動的事件
        //用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置，得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;
        
        //綁定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        
        //移動當(dāng)前元素
        op.style.left = left + 'px';
        op.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  
  
  },
  computed:{},
});

當(dāng)然，我們可以將它綁定為一個自定義指令，這樣的話就可以用調(diào)用指令的形式來實現(xiàn)拖拽效果，下面是定義自定義指令的代碼

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*設(shè)置一下背景*/
  }
</style>
<body>
  <p id="app" v-drag>    <!--實現(xiàn)用指令形式實現(xiàn)拖拽效果-->
    
  </p>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定義
      bind: function (el) {
        let op = el;  //獲取當(dāng)前元素
        op.onmousedown = (e) => {
          //算出鼠標(biāo)相對元素的位置
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置，得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //綁定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移動當(dāng)前元素
            op.style.left = left + 'px';
            op.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

以上是“使用Vue操作DIV的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：使用Vue操作DIV的方法
本文地址：http://jinyejixie.com/article40/ggepeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、云服務(wù)器、標(biāo)簽優(yōu)化、網(wǎng)頁設(shè)計公司、微信公眾號、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化