基于Vue實現拖拽效果

效果圖

demo1.gif

分清clientY pageY screenY layerY offsetY的區別

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

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

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

區別

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

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

實現拖拽功能

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

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

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

// darg.html

<style>
    #app{
        position: relative;     /*定位*/
        top: 10px;
        left: 10px;
        width: 200px;
        height: 200px;
        background: #666;       /*設置一下背景*/
    }
</style>
<body>
    <div id="app" v-drag>       <!--實現用指令形式實現拖拽效果-->
        
    </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實現了,我們用了兩種不同的方式實現了拖拽,但實際上換湯不換藥,我們需要弄清楚pageY、screenY、clientY、layerY、offsetY等區別。當然我們同時也學習了Vue的一些方法,例如自定義指令等。

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

原創文章,轉載需聯系

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1 11
  • 之前寫過一篇瀏覽器事件的相關操作和事件運行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件...
    faremax閱讀 1,648評論 0 0
  • 本節介紹各種常見的瀏覽器事件。 鼠標事件 鼠標事件指與鼠標相關的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,494評論 0 4
  • 文章有黃楚才嘔心瀝血,熬夜做成,轉載請著名出處。 更多知識點請關注本人的域名的后期更新huangchucai.cn...
    sunny519111閱讀 630評論 0 0
  • 在javascript中操作dom節點讓其運動的時候,常常會涉及到各種寬高以及位置坐標等概念,如果不能很好地理解這...
    Ecl_02b8閱讀 242評論 0 0