vue自定义指令是个非常有意思的存在,是一个非常便利的功能。
今天突然想做一下拖拽div的功能,本来想直接写到.vue文件中然后想到其实拖拽是针对某个div,于是就想到自定义指令。
vue
template中
<div style="width: 100px;height: 100px;background: black;position: fixed;top: 200px;left: 0" v-dragMove v-drag></div>
<script>
import drag from '../assets/drag'
import dragMove from '../assets/dragMove'
</script>
drag
新建drag.js文件这是pc端的拖拽方案
import Vue from 'vue'
Vue.directive('drag',{
bind:function (el) {
//监听document是因为如果监听元素el的话鼠标太快移出元素后就会失效
el.onmousedown = (event) => {
//算出鼠标相对元素的位置
let pointX = event.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离(鼠标到元素左边的距离)
let pointY = event.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离(鼠标到元素顶部的高度)
document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - pointX;
let top = e.clientY - pointY;
//移动当前元素
el.style.left = left + 'px';
el.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
})
dragMove
新建dragMove.js文件这是移动端的拖拽方案
import Vue from 'vue'
Vue.directive('dragMove',{
bind: function (el, binding) {
var touch,disX,disY
el.ontouchstart = (e) => {
if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上
touch = e.touches[0];
}else {
touch = e;
}
disX = touch.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离(鼠标到元素左边的距离)
disY = touch.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离(鼠标到元素顶部的高度)
}
el.ontouchmove = (e)=>{
if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上
touch = e.touches[0];
}else {
touch = e;
}
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = touch.clientX - disX;
let top = touch.clientY - disY;
//移动当前元素
el.style.left = left + 'px';
el.style.top = top + 'px';
e.preventDefault();//阻止页面的滑动默认事件
};
el.ontouchend = (e) => {
// el.ontouchmove = null;
// el.ontouchend = null;
};
}
})