弹窗拖拽指令封装
import Vue from 'vue';
const drag = Vue.directive('drag', {
bind: function (el) {},
inserted: function (el) {
if (el.firstChild.className.indexOf("Title") != -1) {
const W = el.offsetWidth
const H = el.offsetHeight
const screenWidth = document.body.clientWidth;
const screenHeight = document.documentElement.clientHeight;
el.firstChild.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
const left = e.pageX - disx;
const top = e.pageY - disy;
if (left <= 0) {
el.style.left = 0 + 'px'
} else if (left >= screenWidth - W) {
el.style.left = screenWidth - W + 'px'
} else {
el.style.left = left + 'px'
}
if (top <= 0) {
el.style.top = 0 + 'px'
} else if (top >= screenHeight - H) {
if (screenHeight < H) {
el.style.top = 100 + 'px'
} else {
el.style.top = screenHeight - H + 'px'
}
} else {
el.style.top = top + 'px'
}
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
} else {
el.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
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;
}
}
}
},
updated: function (el) {}
});
export default drag;