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

thursday 發(fā)布于2019-08-29 15:09 / 2971人閱讀

摘要：是瀏覽器的特有屬性實(shí)現(xiàn)拖拽功能我們既然熟悉了這幾個(gè)偏移屬性的意思，那么我們就進(jìn)入我們的重點(diǎn)。當(dāng)然我們同時(shí)也學(xué)習(xí)了的一些方法，例如自定義指令等。

效果圖

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

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

clientY 指的是距離可視頁(yè)面左上角的距離

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

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

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

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

一張圖帶大家簡(jiǎn)單了解了解

在我們簡(jiǎn)單了解完這些個(gè)屬性以后，有幾個(gè)屬性需要分清。

	相同點(diǎn)	不同點(diǎn)
clientY	距離頁(yè)面左上角距離	受頁(yè)面滾動(dòng)的影響
pageY	距離頁(yè)面左上角的距離	不受頁(yè)面滾動(dòng)影響

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

實(shí)現(xiàn)拖拽功能

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

// darg.html



           
        {{positionX}}
        {{positionY}}

//main.js
let app = new Vue({
    el:"#app",
    data:{
        positionX:0,
        positionY:0,
    },
    methods:{
        move(e){
            let odiv = e.target;        //獲取目標(biāo)元素
            
            //算出鼠標(biāo)相對(duì)元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠標(biāo)按下并移動(dòng)的事件
                //用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
                let left = e.clientX - disX;    
                let top = e.clientY - disY;
                
                //綁定元素位置到positionX和positionY上面
                this.positionX = top;
                this.positionY = left;
                
                //移動(dòng)當(dāng)前元素
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }    
    
    },
    computed:{},
});

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

// darg.html

//main.js

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

最后

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

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

原創(chuàng)文章，轉(zhuǎn)載需聯(lián)系