拖拽功能 php,基于Vue實作拖拽功能

這篇文章主要為大家詳細介紹了Vue實作拖拽功能，拖動方塊進行移動，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文執行個體為大家分享了Vue實作拖拽功能的具體代碼，供大家參考，具體内容如下

效果圖：

HTML代碼：

位置

x:{{val.x}}

y:{{val.y}}

//注意這裡要通過指令綁定函數将目前元素的位置資料傳出來

JS代碼：

Vue.directive('drag',//自定義指令

{bind:function (el, binding) {

let op = el; //目前元素

let self = this; //上下文

op.onmousedown = function (e) {

//滑鼠按下，計算目前元素距離可視區的距離

let disX = e.clientX - op.offsetLeft;

let disY = e.clientY - op.offsetTop;

document.onmousemove = function (e) {

//通過事件委托，計算移動的距離

let l = e.clientX - disX;

let t = e.clientY - disY;

//移動目前元素

op.style.left = l + 'px';

op.style.top = t + 'px';

//将此時的位置傳出去

binding.value({x:e.pageX,y:e.pageY})

};

document.onmouseup = function (e) {

document.onmousemove = null;

document.onmouseup = null;

};

};

}

}

);

window.onload = function () {

let vm = new Vue({

el: '#box',

data: {

val: '123',

style: {

width: '100px',

height: '100px',

background: 'aqua',

position: 'absolute',

right: '30px',

top: 0

}

},

methods:{

//接受傳來的位置資料，并将資料綁定給data下的val

greet(val){

vm.val = val;

}

} ,

});

}

相關推薦：