@ecip/ecip-web
Version:
A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features
33 lines (32 loc) • 1.28 kB
JavaScript
export default {
bind(el, binding, vnode, oldVnode) {
el.onmousedown = function (ev) {
// debugger
const disX = ev.clientX;
const disY = ev.clientY;
const originalScrollLeft = el.scrollLeft;
const originalScrollTop = el.scrollTop;
const originalScrollBehavior = el.style["scroll-behavior"];
const originalPointerEvents = el.style["pointer-events"];
el.style["scroll-behavior"] = "auto";
// 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
document.onmousemove = function (ev) {
ev.preventDefault();
const distanceX = ev.clientX - disX;
const distanceY = ev.clientY - disY;
el.scrollTo(
originalScrollLeft - distanceX,
originalScrollTop - distanceY
);
// 由于我们的图片本身有点击效果，所以需要在鼠标拖动的时候将点击事件屏蔽掉
el.style["pointer-events"] = "none";
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
el.style["scroll-behavior"] = originalScrollBehavior;
el.style["pointer-events"] = originalPointerEvents;
};
};
},
};