基于Vue实现拖拽功能

基于Vue实现拖拽功能

本文实例为大家分享了vue实现拖拽功能的具体代码，供大家参考，具体内容如下

效果图：

HTML代码：

位置

x:{{val.x}}
y:{{val.y}}

//注意这里要通过指令绑定函数将当前元素的位置数据传出来

js代码：

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

{bind:function (el, binding) {

let oDiv = el; //当前元素

let self = this; //上下文

oDiv.onmousedown = function (e) {

//鼠标按下，计算当前元素距离可视区的距离

let disX = e.clientX - oDiv.offsetLeft;

let disY = e.clientY - oDiv.offsetTop;

document.onmousemove = function (e) {

//通过事件委托，计算移动的距离

let l = e.clientX - disX;

let t = e.clientY - disY;

//移动当前元素

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

oDiv.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;

}

} ,

});

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。