Vue 添加自定义指令
自定义指令
<div class="active" v-for='item in 10' v-drag style="width: 100px;
height: 100px;background: red;position: absolute;left: 0;top: 0;"></div>
directives: {
drag: {
/* inserted: function (el) {
el.onmousedown = function (ev) {
ev.stopPropagation();
let obj = document.getElementsByClassName("active")[0];
let disX1 = ev.clientX - obj.offsetLeft;
let disY1 = ev.clientY - obj.offsetTop;
document.onmousemove = function (ev) {
let l = ev.clientX - disX1;
let t = ev.clientY - disY1;
obj.style.left = l + 'px';
obj.style.top = t + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
}*/
//指令绑定到元素 第二种实现方式
bind(el, binding) {
/*
* el 指令绑定的元素,可以用来直接操作dom
* binding 一个对象,包含许多的属性
*/
el.onmousedown = function (e) {
console.log("开始拖动");
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = function (e) {
console.log("拖动中");
el.style.left = e.clientX - disX + "px";
el.style.top = e.clientY - disY + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
console.log("拖动结束");
};
return false;
}
}
},
},
v-drag.limit 界限
drag: {
inserted: function (el,binding) {
el.onmousedown = function (ev) {
let oEvent=ev || window.event
oEvent.stopPropagation();
console.log(el)
/*
一、clientX、clientY
点击位置距离当前body可视区域的x,y坐标
二、pageX、pageY
对于整个页面来说,包括了被卷去的body部分的长度
三、screenX、screenY
点击位置距离当前电脑屏幕的x,y坐标
四、offsetX、offsetY
相对于带有定位的父盒子的x,y坐标
*/
// clientX
// clientWidth = width+左右padding
// offsetWidth offsetWidth = width + 左右padding + 左右boder
// offsetLeft 元素本身到浏览器内侧的距离
// 当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父
// 级都没有定位,则分别是到body 顶部 和左边的距离
// let obj = document.getElementsByClassName("active")[0];
let disX1 = oEvent.clientX - el.offsetLeft;
let disY1 = oEvent.clientY - el.offsetTop;
document.onmousemove = function (ev) {
let oEvent=ev || window.event
let l = oEvent.clientX - disX1;
let t = oEvent.clientY - disY1;
if (binding.modifiers.limit) {
if(l < 0){
l=0;
}
if(l>document.documentElement.clientWidth-el.offsetWidth){
l=document.documentElement.clientWidth-el.offsetWidth
}
if(t<0){
t=0
}
if(t>document.documentElement.clientHeight-el.offsetWidth){
t=document.documentElement.clientHeight-el.offsetWidth
}
};
el.style.left = l + 'px';
el.style.top = t + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}