Vue根据directive指令进行div拖拽,解决拖拽drag后触发点击click事件,解决directive无法获取this的问题
开始做拖拽上网查了一些资料,拖拽效果容易做到,但是拖拽后会触发默认的点击事件,于是又上网搜索找到了方法,将click后的事件移入到directive中处理,然后发现无法获取到环境中的this,下面以拖拽button做为示例:
html
<el-button v-drag>text</el-button>
js
export default {
directives: {
drag(el,binding,vnode) {
let clientOffset = {};
el.onmousedown = function(e) {
var disx = e.pageX - el.offsetLeft
var disy = e.pageY - el.offsetTop
clientOffset.clientX = event.clientX;
clientOffset.clientY = event.clientY;
document.onmousemove = function (e) {
el.style.left = e.pageX - disx + 'px'
el.style.top = e.pageY - disy + 'px'
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null
}
}
el.addEventListener('mouseup', (event) => { //鼠标抬起后的事件,判断是拖拽还是点击
let clientX = event.clientX;
let clientY = event.clientY;
if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) { //这里触发点击事件,将click方法移入这里
let that = vnode.context //通过vnode参数来获取this,此时的that就可以获取到js中的this
} else {
return //这里是拖拽事件
}
})}
},
}