基于Vue實現(xiàn)拖拽效果

更新時間：2018年04月27日 08:33:21 作者：bb7bb

這篇文章主要介紹了基于Vue實現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下

效果圖

demo1.gif

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

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

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

區(qū)別

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

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

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

layerY與offsetY區(qū)別

實現(xiàn)拖拽功能

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

// darg.html

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

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

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*設置一下背景*/
  }
</style>
<body>
  <div id="app" v-drag>    <!--實現(xiàn)用指令形式實現(xiàn)拖拽效果-->
    
  </div>
</body>
//main.js

let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定義
      bind: function (el) {
        let odiv = el;  //獲取當前元素
        oDiv.onmousedown = (e) => {
          //算出鼠標相對元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //綁定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移動當前元素
            odiv.style.left = left + 'px';
            odiv.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

最后

到這里我們就已經把拖拽效果用Vue實現(xiàn)了，我們用了兩種不同的方式實現(xiàn)了拖拽，但實際上換湯不換藥，我們需要弄清楚pageY、screenY、clientY、layerY、offsetY等區(qū)別。當然我們同時也學習了Vue的一些方法，例如自定義指令等。

以上所述是小編給大家介紹的基于Vue實現(xiàn)拖拽效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: