fix: take the dragged node depth into account when calculating the nesting levels (#91)

Author: hesamurai

src/main.ts

@@ -338,12 +338,20 @@ class NestedSort {
     let depth = 0
     const list = this.getSortableList()
 
+    let selfDepth = 0
+    if (this.draggedNode) {
+      // the dragged node might be a nested list contributing to the final nesting levels
+      const depthUL = this.draggedNode.querySelectorAll('ul').length || 0
+      const depthOL = this.draggedNode.querySelectorAll('ol').length || 0
+      selfDepth = depthUL > depthOL ? depthUL : depthOL
+    }
+
     while (list !== el?.parentElement) {
       if (el?.parentElement instanceof this.listInterface) depth++
       el = el?.parentElement as HTMLElement
     }
 
-    return depth
+    return depth + selfDepth
   }
 
   nestingThresholdReached(el: HTMLElement, isPlaceHolderCheck = false): boolean {

test/main.test.js

@@ -1193,6 +1193,26 @@ describe('NestedSort', () => {
         expect(depth).toBe(id.toString().split('').length - 1)
       })
     })
+
+    it('should take the depth of the dragged node into account', () => {
+      const ns = initDataDrivenList({
+        data: [
+          {id: 1, text: '1'},
+          {id: 11, text: '1-1', parent: 1},
+          {id: 111, text: '1-1-1', parent: 11},
+          {id: 1111, text: '1-1-1-1', parent: 111},
+          {id: 2, text: '2'},
+          {id: 22, text: '2-2', parent: 2},
+        ],
+      })
+
+      const node = document.querySelector('[data-id="1111"]') // has 3 levels of nesting
+      ns.draggedNode = document.querySelector('[data-id="2"]') // has 1 level of nesting since it includes the item with ID of 22
+
+      const depth = ns.getNodeDepth(node)
+
+      expect(depth).toBe(4)
+    })
   })
 
   describe('nestingThresholdReached method', () => {