vue拖拽形成一个HTML,基于Vue实现拖拽功能

这篇文章主要为大家详细介绍了基于Vue实现拖拽功能，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

本文实例为大家分享了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;

}

} ,

});

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于基于Vue实现拖拽功能的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js