foreword
In the back-end management system, scroll bars often appear when pop-up windows or large forms are used, but sometimes it is not convenient to use the mouse to drag the scroll bar when performing operations such as processes and pictures. It is more convenient to drag the picture or container with the mouse to trigger the movement of the scroll bar
feature design
If you want to realize the movement of the mouse-assisted trigger scroll bar, you need to use mousedown，mouseup，mousemovethree events to dynamically modify the scrollLeftsum of the scroll bar through the movement of the mouse scrollTopto simulate the change of the position of the scroll bar.
Considering that mouse dragging is independent and reusable, you can create a class to encapsulate mouse events. When using it, you only need to hang the event on the specified container to realize the reuse of functions.
1. Create a mouse movement event class
Create move.js
// 鼠标移动滚动位置类
class Drag {
constructor(vm) {
this.dragWrap = vm;// 要挂载的容器
this._dom = {
};
this._x = 0;
this._y = 0;
this._top = 0;
this._left = 0;
this.move = false;
this.down = false;
this.init.apply(this, arguments);
}
// 绑定事件
init() {
this.bindEvent();
}
// 给要素增加鼠标事件mousedown，mouseup，mousemove
bindEvent() {
var t = this;
this.dragWrap.addEventListener('mousedown', function (e) {
e && e.preventDefault();
if (!t.move) {
t.move = false;
t.down = true;
t._x = e.clientX;
t._y = e.clientY;
t._top = t.dragWrap.scrollTop;
t._left = t.dragWrap.scrollLeft;
}
});
this.dragWrap.addEventListener('mouseup', function (e) {
e && e.preventDefault();
t.move = false;
t.down = false;
});
this.dragWrap.addEventListener('mousemove', function (e) {
if (t.down) {
e && e.preventDefault();
t.move = true;
let x = t._x - e.clientX;
let y = t._y - e.clientY;
t.dragWrap.scrollLeft = t._left + x;
t.dragWrap.scrollTop = t._top + y;
}
});
}
}
export default Drag;
use in the page
Use the move.js class in the page to realize the movement of the scroll bar position triggered by mouse movement
<template>
<div style="padding: 20px">
<h2>div move</h2>
<div ref="main" class="main">
<div class="box">
<div>1111111111111111111111</div>
</div>
</div>
</div>
</template>
<script>
import Drag from './move.js';
export default {
data() {
return {
};
},
mounted() {
new Drag(this.$refs.main);
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.main {
width: 400px;
height: 400px;
background-color: lightgray;
overflow: auto;
}
.box {
width: 500px;
height: 500px;
padding-top: 100px;
background-color: red;
text-align: center;
cursor: pointer;
}
</style>
achieve effect
