1.2.1 修复移动节点的bug

paiguFK · Nov 22, 2021 · 9b5fc09 · 9b5fc09
1 parent 21eb565
commit 9b5fc09
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,9 @@
 4. 关于页面的渲染，可以参考这篇文章 [地址](https://juejin.cn/post/6844903982742110216) 
 + 虚拟树和列表的不同在于，树是可以收起和展开的，所以目前每次渲染页面，我都会从第一条数据开始遍历，判断当前节点是否收起，如果收起就不在计算范围内，我会根据节点的显示情况判断这个节点是否要进行绘制，当然在这个过程中，我们还要计算当前树的总高度，所以相对来说，还是有一些性能消耗的，在数据量很大并快速的拖拽滚动条的时候，有时候会有空白的现象，但总体不影响效果，此处的算法后续还会进行优化。
 
+#2021/11/22 V1.2.1(已发布)
++ 修复移动节点的bug
+
 #2021/09/07 V1.1.1(已发布)
 + 更新方法 setSelectKey(key, triggerClick, needLocate)，triggerClick：Boolean，是否触发点击回调，needLocate:Boolean，是否自动定位到选中节点
 + 添加lazyLoad参数，是否需要异步加载数据

diff --git a/dist/index.html b/dist/index.html
@@ -53,7 +53,7 @@
             cursor: pointer;
         }
     </style>
-<!--    <script src="/xntree.min.js"></script>-->
+    <script src="./dist/xntree.min.js"></script>
 </head>
 <body>
 <div class="xn-tree-container">
@@ -129,7 +129,7 @@ <h3>自定义显示内容，不显示默认图标</h3>
         checkDisabled: function (d) {
         },
         autoOpen: function (d, level) {
-            return level <= 0;
+            return level <= 3;
         },
         checkSticky: {//check关联
             on: '',//p,自动勾选父，c自动勾选子，function
@@ -156,7 +156,7 @@ <h3>自定义显示内容，不显示默认图标</h3>
                 console.log(checkedData);
             },
             moveChange: (movedNode, currentData) => {
-                console.log(currentData);
+                // console.log(currentData);
             }
         }
     }

diff --git a/dist/static/data.js b/dist/static/data.js
@@ -331116,7 +331116,7 @@ let listdata=[
             "objectcode": "-",
             "parents": "-"
         },
-        "parentid": "-",
+        "parentid": "",
         "hasParent": false,
         "hasChildren": true,
         "icon": null,

diff --git a/dist/xntree.min.js b/dist/xntree.min.js
diff --git a/dist/xntree.min.js.map b/dist/xntree.min.js.map
diff --git a/index.html b/index.html
@@ -129,7 +129,7 @@ <h3>自定义显示内容，不显示默认图标</h3>
         checkDisabled: function (d) {
         },
         autoOpen: function (d, level) {
-            return level <= 0;
+            return level <= 3;
         },
         checkSticky: {//check关联
             on: '',//p,自动勾选父，c自动勾选子，function
@@ -156,7 +156,7 @@ <h3>自定义显示内容，不显示默认图标</h3>
                 console.log(checkedData);
             },
             moveChange: (movedNode, currentData) => {
-                console.log(currentData);
+                // console.log(currentData);
             }
         }
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xntree",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "仙女座虚拟树插件",
   "dependencies": {},
   "devDependencies": {

diff --git a/src/xnTree.css b/src/xnTree.css
@@ -58,6 +58,8 @@
     display: inline-block;
     width:15px;
     flex: 0 0 15px;
+    line-height: inherit;
+    height:100%;
 }
 .xntree-outer .xn-checkbox,.xntree-outer .xn-radio{
     width:14px;
@@ -102,7 +104,7 @@
     height: 1px;
     background: #333;
     position: absolute;
-    display: none;
+    /*display: none;*/
 }
 .xntree-outer .xntree-item{
     user-select: none;
@@ -111,7 +113,10 @@
 .xntree-outer .xntree-item.xn-onmoving{
     background: var(--xntree-moving-color);
 }
-.xntree-outer .xntree-item:not(.xn-onmoving,.on):hover{
+/*.xntree-outer .xntree-item:not(.xn-onmoving,.on):hover{*/
+/*    background: var(--xntree-hover-color);*/
+/*}*/
+.xntree-outer:not(.xn-moving) .xntree-item:not(.on):hover{
     background: var(--xntree-hover-color);
 }
 .xntree-outer .xn-searchedkey{

diff --git a/src/xnTree.js b/src/xnTree.js
@@ -350,17 +350,19 @@ class xnTree {
                     let $onDom = $t.parents('.xntree-item').eq(0);
                     el.$onDom = $onDom;
                     el.onId = $onDom.attr("data-id")
-                    let [dir, x, y] = this.getMovePos($onDom, e)
+                    let [dir, x, y,nextLevel] = this.getMovePos($onDom, e)
                     el.dir = dir;
                     el.y = y;
                     el.x = x;
+                    el.nextLevel=nextLevel;
                     if (el.dir == 'on') {
                         el.$onDom.addClass('xn-onmoving')
                         this.movedom.style.display = 'none'
                     } else {
                         this.movedom.style.top = el.y + 'px'
                         this.movedom.style.left = el.x + 'px'
                         this.movedom.style.display = 'block'
+                        this.movedom.style.width = 'calc(100% - '+el.x+'px)'
                     }
                 }
                 move = true;
@@ -409,6 +411,14 @@ class xnTree {
     }
 
     moveItem(el) {
+        // if(el.isNext){
+        //     el.onId=
+        // }
+        let nextLevel=el.nextLevel
+        while(el.nextLevel){
+            el.onId=this.flatList[el.onId][this.option.pId];
+            el.nextLevel--;
+        }
         if (el.id == el.onId) {
             return;
         }
@@ -438,7 +448,7 @@ class xnTree {
             this.flatList[el.onId].children = [];
             hasChild = false;
         }
-        if (el.dir == 'on' || (hasChild && el.dir == 'down' && this.flatList[el.onId].children[0] && this.flatList[el.onId].children[0].$show)) {//1.在节点上，2.当节点为展开状态，鼠标在节点下方，统一做在节点上的操作
+        if (el.dir == 'on' || (hasChild && el.dir == 'down' && this.flatList[el.onId].children[0] && this.flatList[el.onId].children[0].$show && !nextLevel)) {//1.在节点上，2.当节点为展开状态，鼠标在节点下方，统一做在节点上的操作
             this.flatList[el.id][this.option.pId] = el.onId;
             this.flatList[el.onId].children.unshift(this.flatList[el.id])
             this.flatList[el.id].$show = this.flatList[el.onId].children[1] && this.flatList[el.onId].children[1].$show;
@@ -449,7 +459,7 @@ class xnTree {
             return;
         }
         let pNode = this.flatList[this.flatList[el.onId][this.option.pId]];
-        if (!pNode) {
+        if ((!pNode) || (this.flatList[el.onId][this.option.id]==this.flatList[el.onId][this.option.pId])) {//有的时候跟节点的id和pid是同一个值
             pNode = {
                 children: this.data
             }
@@ -485,14 +495,20 @@ class xnTree {
     }
 
     getMovePos($dom, e) {
+        let isNext=false;
+        let nextLevel=null;
         let dir = ''
         let pos = $dom.get(0).getBoundingClientRect();
-        let top = pos.top, top1 = top + pos.height / 4, top2 = top + pos.height * 3 / 4,
+        let top = pos.top, top1 = top + pos.height*2 / 5, top2 = top + pos.height * 3 / 5,
             top4 = top + pos.height;
         let etop = e.clientY;
         let y, x;
-        // console.log(this.container.getBoundingClientRect().top,top,etop);
-        x = pos.left + $dom.find(".xn-indent").length * 15;
+        let curLevel=$dom.get(0).getAttribute('data-level');
+        let siblingLevel=$dom.get(0).nextSibling?$dom.get(0).nextSibling.getAttribute('data-level'):null;
+        let isindent=e.target.classList.contains('xn-indent');
+
+
+        x = pos.left + ($dom.find(".xn-indent").el.length-1) * 15;
         if (etop <= top1) {
             dir = 'up'
             y = top - this.container.getBoundingClientRect().top + this.container.scrollTop;
@@ -503,8 +519,15 @@ class xnTree {
         if (etop > top2) {
             dir = 'down'
             y = top4 - this.container.getBoundingClientRect().top + this.container.scrollTop;
+            if(isindent && curLevel!=siblingLevel){
+                nextLevel=($dom.children('.xn-indent').el).length-($dom.children('.xn-indent').el).indexOf(e.target);
+                if(curLevel-nextLevel<siblingLevel){
+                    nextLevel=curLevel-siblingLevel;
+                }
+                x=x-nextLevel*15-15;
+            }
         }
-        return [dir, x, y];
+        return [dir, x, y,nextLevel];
     }
 
     setNodesShow(node) {

diff --git a/static/data.js b/static/data.js
@@ -331116,7 +331116,7 @@ let listdata=[
             "objectcode": "-",
             "parents": "-"
         },
-        "parentid": "-",
+        "parentid": "",
         "hasParent": false,
         "hasChildren": true,
         "icon": null,