feat(core): Mixly.Drag添加对移动端触摸手势的支持

common/css/drag.css

@@ -4,6 +4,10 @@
     width: 100%;
     cursor: s-resize;
     z-index: 100;
+    transition: opacity 0.2s ease;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .vertical-line {
@@ -12,35 +16,39 @@
     height: 100%;
     cursor: w-resize;
     z-index: 100;
+    transition: opacity 0.2s ease;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 @-webkit-keyframes drag-fadein {
-  0% {opacity: 0;}
-  100% {opacity: 1;}
+    0% { opacity: 0; }
+    100% { opacity: 1; }
 }
 
 @keyframes drag-fadein {
-  0% {opacity: 0;}
-  100% {opacity: 1;}
+    0% { opacity: 0; }
+    100% { opacity: 1; }
 }
 
 .horizontal-line:hover,
 .vertical-line:hover {
     -webkit-animation-name: drag-fadein;
+    animation-name: drag-fadein;
     animation-duration: 0.2s;
-    animation-delay: .3s;
+    animation-delay: .2s;
     animation-fill-mode: forwards;
 }
 
 .horizontal-line:active,
-.vertical-line:active {
-    -webkit-animation-name: drag-fadein;
-    animation-duration: 0.2s;
-    animation-delay: .3s;
-    animation-fill-mode: forwards;
+.vertical-line:active,
+.drag-s-container.dragging > .horizontal-line,
+.drag-w-container.dragging > .vertical-line {
+    opacity: 1;
+    animation: none;
 }
 
-/* 由于拖拽而产生尺寸改变元素的容器 */
 .drag-s-container {
     display: flex;
     flex-direction: column;
@@ -53,22 +61,26 @@
     flex-wrap: nowrap;
 }
 
-/* 拖拽元素的容器 */
 .drag-elem {
     position: absolute;
     opacity: 0;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .drag-s-elem {
     width: 100%;
     height: 4px;
     cursor: s-resize;
+    touch-action: none;
 }
 
 .drag-w-elem {
     width: 4px;
     height: 100%;
     cursor: w-resize;
+    touch-action: none;
 }
 
 html[data-bs-theme=light] .horizontal-line,