Update: 锁定一些元素拖拽时的光标样式

common/css/drag.css

@@ -40,14 +40,6 @@
     animation-fill-mode: forwards;
 }
 
-.drag-w-resize * {
-    cursor: w-resize !important;
-}
-
-.drag-s-resize * {
-    cursor: s-resize !important;
-}
-
 /* 由于拖拽而产生尺寸改变元素的容器 */
 .drag-s-container {
     display: flex;
@@ -93,20 +85,6 @@ html[data-bs-theme=dark] .drag-w-elem {
     background-color: rgb(8 105 170);
 }
 
-.drag-elem-shadow {
-    display: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 99;
-    background-color: transparent;
-    opacity: 0;
-}
-
-.drag-elem-shadow.active {
-    display: block;
-}
-
 .drag-disable * {
     pointer-events: none !important;
 }

common/css/scrollbar.css

@@ -19,6 +19,7 @@ body ::-webkit-scrollbar-track {
 body ::-webkit-scrollbar-thumb {
     background-color: #C3C1C1;
     border-radius: 1px;
+    cursor: context-menu;
 }
 
 ::-webkit-scrollbar-thumb:hover,

common/modules/mixly-modules/common/drag.js

@@ -37,7 +37,6 @@ class Drag {
         this.$last = $($children[1]);
         this.config.elem = [ this.$first, this.$last ];
         this.$dragElem = $('<div class="drag-elem"></div>');
-        this.$dragElemShadow = $('<div class="drag-elem-shadow"></div>');
         const dragType = this.config.type === 'h'? 's' : 'w';
         this.$container.addClass(`drag-${dragType}-container`);
         this.shown = Drag.Extend.POSITIVE;
@@ -63,7 +62,6 @@ class Drag {
             this.shown = Drag.Extend.NEGATIVE;
         }
         this.$container.prepend(this.$dragElem);
-        this.$container.prepend(this.$dragElemShadow);
         this.size = [`${size}%`, `${100 - size}%`];
         if (size >=100 || size <=0) {
             const startExitFullSize = parseFloat(this.config.startExitFullSize);
@@ -87,17 +85,22 @@ class Drag {
         const dragElem = this.$dragElem[0];
         const container = this.$container[0];
         const { type, min, elem, full } = this.config;
+        dragElem.onpointerdown = (elemEvent) => {
+            const { currentTarget } = elemEvent;
+            currentTarget.setPointerCapture(elemEvent.pointerId);
+        };
+        dragElem.onpointerup = (elemEvent) => {
+            const { currentTarget } = elemEvent;
+            currentTarget.releasePointerCapture(elemEvent.pointerId);
+        };
         dragElem.onmousedown = (elemEvent) => {
-            this.$dragElemShadow.addClass('active');
             let dis, prev;
             if (type === 'h') {
                 dis = elemEvent.clientY;
                 dragElem.top = dragElem.offsetTop;
-                $('body').addClass('drag-s-resize');
             } else {
                 dis = elemEvent.clientX;
                 dragElem.left = dragElem.offsetLeft;
-                $('body').addClass('drag-w-resize');
             }
             const prevSize = this.size;
 
@@ -135,12 +138,6 @@ class Drag {
                 return false;
             };
             document.onmouseup = () => {
-                this.$dragElemShadow.removeClass('active');
-                if (type === 'h') {
-                    $('body').removeClass('drag-s-resize');
-                } else {
-                    $('body').removeClass('drag-w-resize');
-                }
                 this.prevSize = prevSize;
                 document.onmousemove = null;
                 document.onmouseup = null;
@@ -245,8 +242,9 @@ class Drag {
     dispose() {
         this.resetEvent();
         this.$dragElem[0].onmousedown = null;
+        this.$dragElem[0].onpointerdown = null;
+        this.$dragElem[0].onpointerup = null;
         this.$dragElem.remove();
-        this.$dragElemShadow.remove();
     }
 
     bind(type, func) {

common/modules/mixly-modules/common/editor-blockly.js

@@ -78,6 +78,16 @@ class EditorBlockly extends EditorBase {
                 } : {}
             });
 
+            const $blocklyScrollbarHandle = this.$blockly.find('.blocklyScrollbarHandle');
+            $blocklyScrollbarHandle.on('pointerdown', (event) => {
+                const { currentTarget } = event;
+                currentTarget.setPointerCapture(event.pointerId);
+            });
+            $blocklyScrollbarHandle.on('pointerup', (event) => {
+                const { currentTarget } = event;
+                currentTarget.releasePointerCapture(event.pointerId);
+            });
+
             this.editor.registerToolboxCategoryCallback(
                 Blockly.Variables.CATEGORY_NAME,
                 (...args) => Blockly.Variables.flyoutCategory(...args)

common/modules/mixly-modules/common/editor-monaco.js

@@ -103,7 +103,9 @@ class EditorMonaco extends EditorBase {
                 wordWrapColumn: 300,
                 scrollbar: {
                     vertical: 'visible',
-                    horizontal: 'visible'
+                    horizontal: 'visible',
+                    verticalScrollbarSize: 10,
+                    horizontalScrollbarSize: 10
                 }
             });
             this.addEventsListener();
@@ -156,6 +158,16 @@ class EditorMonaco extends EditorBase {
     }
 
     #addChangeEventListener_() {
+        const $content = EditorMonaco.getContent();
+        const $slider = $content.find('.slider,.minimap-slider');
+        $slider.on('pointerdown', (event) => {
+            const { currentTarget } = event;
+            currentTarget.setPointerCapture(event.pointerId);
+        });
+        $slider.on('pointerup', (event) => {
+            const { currentTarget } = event;
+            currentTarget.releasePointerCapture(event.pointerId);
+        });
         this.#changeListener_ = EditorMonaco.events.bind('change', () => {
             this.#enableChangeEvent_ && this.runEvent('change');
         });
@@ -169,8 +181,11 @@ class EditorMonaco extends EditorBase {
     onUnmounted() {
         super.onUnmounted();
         const editor = EditorMonaco.getEditor();
+        const $content = EditorMonaco.getContent();
+        const $slider = $content.find('.slider,.minimap-slider');
         this.#state_ = editor.saveViewState();
-        EditorMonaco.getContent().detach();
+        $slider.off('pointerdown pointerup');
+        $content.detach();
         this.getContent().empty();
         this.#removeChangeEventListener_();
     }