基於Vue實現拖拽效果

時間 2019-11-07

標籤基於 vue 實現效果简体版

原文原文鏈接

效果圖

分清clientY pageY screenY layerY offsetY的區別

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

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

一張圖帶你們簡單瞭解瞭解瀏覽器

在咱們簡單瞭解完這些個屬性之後，有幾個屬性須要分清。app

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

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

實現拖拽功能

咱們既然熟悉了這幾個偏移屬性的意思，那麼咱們就進入咱們的重點。話很少說直接上代碼學習

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

固然，咱們能夠將它綁定爲一個自定義指令，這樣的話就能夠用調用指令的形式來實現拖拽效果，下面是定義自定義指令的代碼this

// 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的一些方法，例如自定義指令等。spa

成功不在一朝一夕間，咱們都須要努力3d

原創文章，轉載需聯繫code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。