WHN——优化首页拖动代码

@VIEW/应用首页视图/VIEW-BASE.vue.ftl

@@ -10,7 +10,7 @@
         this.viewState.next({ tag: 'appmenu', action: 'load', data: {} });
         this.$viewTool.setIndexParameters([{ pathName: '${view.getCodeName()?lower_case}', parameterName: '${view.getCodeName()?lower_case}' }]);
         this.$viewTool.setIndexViewParam(this.context);
-        this.mouse_move();
+        this.draggable();
         <#--  let loader:any = document.getElementById('app-loader');
         loader.parentNode.removeChild(loader);  -->
 </#assign>
@@ -215,51 +215,75 @@
     }
 
     /**
-     * 鼠标拖动事件
+     * 鼠标拖动点击事件
      *
      * @param {*} val
      * @returns {*}
      * @memberof ${srfclassname('${view.name}')}Base
      */
-    public mouse_move(){
-        let move_axis:any = document.getElementById("move_axis");
-        let left_move :any= document.getElementById("left_move");
-        let right_move :any= document.getElementById("right_move");
-        let movebox :any= document.getElementById("movebox");
-        let leftWidth :number = parseInt(left_move.style.width);
-        move_axis.onmousedown = (e:any) =>{
+    public draggable(){
+        let resizeLine:any = document.getElementById("move_axis");
+        let sideBar :any= resizeLine.previousElementSibling;
+        let content :any= resizeLine.nextElementSibling;
+        let container :any= resizeLine.parentElement;
+        let leftWidth :number = parseInt(sideBar.style.width);
+        resizeLine.onmousedown = (e:any) =>{
             let startX = e.clientX;
-            move_axis.left = move_axis.offsetLeft;
-            document.onmousemove =  (e:any) =>{
-                let endX = e.clientX; 
-                let moveLen = move_axis.left + (endX - startX);
-                let maxT = movebox.clientWidth - move_axis.offsetWidth;
-                if (moveLen < 150) moveLen = 150;
-                if (moveLen > maxT - 150) moveLen = maxT - 150; 
-                move_axis.style.left = moveLen;
-                left_move.style.width = moveLen + "px";
-                right_move.style.width = (movebox.clientWidth - moveLen - 5) + "px";
-                if (moveLen>500) {
-                    left_move.style.width = 500 + 'px';
-                }
+            resizeLine.left = resizeLine.offsetLeft;
+            this.dragging(resizeLine,startX,container,sideBar,content,leftWidth);
+            this.dragEnd(resizeLine);
+            resizeLine.setCapture && resizeLine.setCapture();
+            return false;
+        }
+    }
 
-                let left_width : number = parseInt(left_move.style.width);
-                move_axis.style.left = left_width - 5 + 'px';
-                if (left_width < leftWidth){
-                    move_axis.style.left = leftWidth - 5 + 'px';
-                }
+    /**
+     * 鼠标拖动事件
+     *
+     * @param {*} resizeLine   拖动滑块
+     * @param {*} startX       拖动起始位置
+     * @param {*} container    父节点
+     * @param {*} sideBar      侧边栏
+     * @param {*} content      右侧内容区域
+     * @param {*} leftWidth    侧边栏宽度
+     * @memberof ${srfclassname('${view.name}')}Base
+     */
+    public dragging(resizeLine:any,startX:any,container:any,sideBar:any,content:any,leftWidth:any) {
+        document.onmousemove =  (e:any) =>{
+            let endX = e.clientX;
+            let moveDistance = resizeLine.left + (endX - startX);
+            let maxT = container.clientWidth - resizeLine.offsetWidth;
+            if(moveDistance < 150) moveDistance = 150;
+            if(moveDistance > maxT - 150) moveDistance = maxT - 150;
+            resizeLine.style.left = moveDistance;
+            sideBar.style.width = moveDistance + 'px';
+            content.style.width = (container.clientWidth - moveDistance - 5) + 'px';
+            if(moveDistance > 500) {
+                sideBar.style.width = 500 + 'px'
             }
-            document.onmouseup = (evt) =>{
-                document.onmousemove = null;
-                document.onmouseup = null;
-                move_axis.releaseCapture && move_axis.releaseCapture();
+            let left_Width :number = parseInt(sideBar.style.width);
+            resizeLine.style.left = left_Width - 5 + 'px';
+            if(left_Width < left_Width) {
+                sideBar.style.left = leftWidth  - 5 + 'px'
             }
-            move_axis.setCapture && move_axis.setCapture();
-            return false;
         }
-        
     }
 
+    /**
+     * 鼠标拖动结束事件
+     *
+     * @param {*} resizeLine
+     * @memberof ${srfclassname('${view.name}')}Base
+     */
+    public dragEnd(resizeLine:any) {
+        document.onmouseup = (evt) =>{
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resizeLine.releaseCapture && resizeLine.releaseCapture();
+        }
+    }
+}
+
 <#ibizinclude>
 ../@MACRO/VIEW_BOTTOM-BASE.vue.ftl
 </#ibizinclude>