vue html 拖拽,使用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;

}

} ,

});

}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

vue中filter用法总结

处理Vue项目编译后部署在非网站根目录方法详解

JS设计模式中链式调用使用解析