基于Vue實現拖拽效果

韓冰發布于2019-08-22 16:40 / 1564人閱讀

摘要：是瀏覽器的特有屬性實現拖拽功能我們既然熟悉了這幾個偏移屬性的意思，那么我們就進入我們的重點。當然我們同時也學習了的一些方法，例如自定義指令等。

效果圖

分清clientY pageY screenY layerY offsetY的區別

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

clientY 指的是距離可視頁面左上角的距離

pageY 指的是距離可視頁面左上角的距離(不受頁面滾動影響)

screenY 指的是距離屏幕左上角的距離

layerY 指的是找到它或它父級元素中最近具有定位的左上角距離

offsetY 指的是距離它自己左上角的距離

一張圖帶大家簡單了解了解

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

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

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

實現拖拽功能

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

// darg.html



           
        {{positionX}}
        {{positionY}}

//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:{},
});

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

// darg.html

//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實現了，我們用了兩種不同的方式實現了拖拽，但實際上換湯不換藥，我們需要弄清楚pageY、screenY、clientY、layerY、offsetY等區別。當然我們同時也學習了Vue的一些方法，例如自定義指令等。

成功不在一朝一夕間，我們都需要努力

原創文章，轉載需聯系

云服務器 GPU云服務器 jQuery拖拽效果 js拖拽效果實現拖拽 js實現數據拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94561.html

基于Vue實現拖拽效果

摘要：是瀏覽器的特有屬性實現拖拽功能我們既然熟悉了這幾個偏移屬性的意思，那么我們就進入我們的重點。當然我們同時也學習了的一些方法，例如自定義指令等。效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

thursday 2019-08-29 15:09 評論0 收藏0
基于Vue實現拖拽效果

摘要：是瀏覽器的特有屬性實現拖拽功能我們既然熟悉了這幾個偏移屬性的意思，那么我們就進入我們的重點。當然我們同時也學習了的一些方法，例如自定義指令等。效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

王巖威 2019-08-02 10:17 評論0 收藏0
基于Vue實現拖拽升級（九宮格拖拽）

摘要：前言在本文中將會用完成九宮格拖拽效果，同時介紹一下網格布局。到這里我們就把基于的九宮格拖拽實現了，有問題或者發現錯誤的請指正，謝謝大家珍惜淡定的心境，苦過后更加清前言在本文中將會用Vue完成九宮格拖拽效果，同時介紹一下網格布局。具體代碼以及demo可以點以下超鏈接進入傳送門：Demo以及完整代碼連接效果實例 showImg(https://segmentfault.com/im...

RyanQ 2019-08-29 15:13 評論0 收藏0
基于Vue實現拖拽升級（九宮格拖拽）

摘要：前言在本文中將會用完成九宮格拖拽效果，同時介紹一下網格布局。到這里我們就把基于的九宮格拖拽實現了，有問題或者發現錯誤的請指正，謝謝大家珍惜淡定的心境，苦過后更加清前言在本文中將會用Vue完成九宮格拖拽效果，同時介紹一下網格布局。具體代碼以及demo可以點以下超鏈接進入傳送門：Demo以及完整代碼連接效果實例 showImg(https://segmentfault.com/im...

Jioby 2019-08-26 11:51 評論0 收藏0