admin/mixly3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): 优化xscrollbar滚动条拖拽时的光标样式

Browse Source
This commit is contained in:
王立帮
2025-04-14 23:46:10 +08:00
parent 55a0001aae
commit 325d6e90dc
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/css/drag.css
View File

@@ -83,8 +83,4 @@ html[data-bs-theme=dark] .vertical-line,
html[data-bs-theme=dark] .drag-s-elem, html[data-bs-theme=dark] .drag-s-elem,
html[data-bs-theme=dark] .drag-w-elem { html[data-bs-theme=dark] .drag-w-elem {
background-color: rgb(8 105 170); background-color: rgb(8 105 170);
}
.drag-disable * {
pointer-events: none !important;
} }

20
common/modules/web-modules/xscrollbar.js
View File

@@ -143,24 +143,37 @@ class XScrollbar {
// 上一次的拖动位置 // 上一次的拖动位置
let screenX = null; let screenX = null;
let screenY = null; let screenY = null;
this.$thumbX.onpointerdown = (elemEvent) => {
const { currentTarget } = elemEvent;
currentTarget.setPointerCapture(elemEvent.pointerId);
};
this.$thumbX.onpointerup = (elemEvent) => {
const { currentTarget } = elemEvent;
currentTarget.releasePointerCapture(elemEvent.pointerId);
};
this.$thumbX.addEventListener('mousedown', (e) => { this.$thumbX.addEventListener('mousedown', (e) => {
this.$trackX.classList.add('x-scrollbar__track--draging'); this.$trackX.classList.add('x-scrollbar__track--draging');
this.thumbXActive = true; this.thumbXActive = true;
screenX = e.screenX; screenX = e.screenX;
$('body').addClass('drag-disable');
}); });
this.$thumbY.onpointerdown = (elemEvent) => {
const { currentTarget } = elemEvent;
currentTarget.setPointerCapture(elemEvent.pointerId);
};
this.$thumbY.onpointerup = (elemEvent) => {
const { currentTarget } = elemEvent;
currentTarget.releasePointerCapture(elemEvent.pointerId);
};
this.$thumbY.addEventListener('mousedown', (e) => { this.$thumbY.addEventListener('mousedown', (e) => {
this.$trackY.classList.add('x-scrollbar__track--draging'); this.$trackY.classList.add('x-scrollbar__track--draging');
this.thumbYActive = true; this.thumbYActive = true;
screenY = e.screenY; screenY = e.screenY;
$('body').addClass('drag-disable');
}); });
this.onMouseup = ((e) => { this.onMouseup = ((e) => {
this.$trackX.classList.remove('x-scrollbar__track--draging'); this.$trackX.classList.remove('x-scrollbar__track--draging');
this.$trackY.classList.remove('x-scrollbar__track--draging'); this.$trackY.classList.remove('x-scrollbar__track--draging');
this.thumbXActive = false; this.thumbXActive = false;
this.thumbYActive = false; this.thumbYActive = false;
$('body').removeClass('drag-disable');
}).bind(this); }).bind(this);
document.addEventListener('mouseup', this.onMouseup); document.addEventListener('mouseup', this.onMouseup);
this.onMousemove = ((e) => { this.onMousemove = ((e) => {
@@ -287,7 +300,6 @@ class XScrollbar {
document.removeEventListener('mousemove', this.onMousemove); document.removeEventListener('mousemove', this.onMousemove);
this.$container.removeEventListener('wheel', this.onWheel); this.$container.removeEventListener('wheel', this.onWheel);
this.$container.removeEventListener('scroll', this.onScroll); this.$container.removeEventListener('scroll', this.onScroll);
this.$dom.classList.remove('x-scrollbar'); this.$dom.classList.remove('x-scrollbar');
this.$dom.classList.remove('x-scrollbar-keep'); this.$dom.classList.remove('x-scrollbar-keep');