fix(draggable plugin): wrong result when move downwards in same level

Author: phphe

src/plugins/draggable/Draggable_vue.js

@@ -116,9 +116,6 @@ export default {
       let index = 0
       for (const {value: el, index: index2} of hp.iterateAll(branchEl.parentElement.children)) {
         if (hp.hasClass(el, 'tree-branch') || hp.hasClass(el, 'tree-placeholder')) {
-          if (el === store.dragBranchEl) {
-            continue
-          }
           if (el === branchEl) {
             break
           }
@@ -259,34 +256,20 @@ export default {
       },
       afterDrop: (store, t) => {
         if (store.pathChanged) {
-          const {startTree, targetTree, startPath, targetPath, dragNode} = store
+          const {startTree, targetTree, startPath, dragNode} = store
+          let {targetPath} = store
           if (this.cloneWhenDrag !== true) {
             // remove from start position
             const startParentPath = hp.arrayWithoutEnd(startPath, 1)
             const startParent = startTree.getNodeByPath(startParentPath)
             const startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children
             const startIndex = hp.arrayLast(startPath)
             startSiblings.splice(startIndex, 1)
-            // update targetPath
-            if (startTree === targetTree) {
-              if (startPath.length <= targetPath.length) {
-                const lenNoEnd = startPath.length - 1
-                let same = true
-                for (let i = 0; i < lenNoEnd; i++) {
-                  const s = startPath[i]
-                  const t = targetPath[i]
-                  if (s !== t) {
-                    same = false
-                    break
-                  }
-                }
-                if (same) {
-                  const endIndex = startPath.length - 1
-                  if (startPath[endIndex] < targetPath[endIndex]) {
-                    targetPath[endIndex] -= 1
-                  }
-                }
-              }
+            // update targetPath if isDownwardsSameLevelMove
+            if (store.isDownwardsSameLevelMove) {
+              targetPath = targetPath.slice(0)
+              const endIndex = startPath.length - 1
+              targetPath[endIndex] -= 1
             }
           }
           // insert to target position

src/plugins/draggable/draggable.js

@@ -466,6 +466,7 @@ export default function makeTreeDraggable(treeEl, options = {}) {
         }
         //
         store.targetPath = options.getPathByBranchEl(placeholder)
+        store.isDownwardsSameLevelMove = isDownwardsSameLevelMove()
         let pathChanged = isPathChanged()
         store.targetPathNotEqualToStartPath = pathChanged
         store.pathChangePrevented = false
@@ -495,9 +496,16 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       }
       //
       function isPathChanged() {
-        const {startTree, targetTree, startPath, targetPath} = store
+        const {startTree, targetTree, startPath, targetPath, isDownwardsSameLevelMove} = store
+        if (isDownwardsSameLevelMove) {
+          return hp.arrayLast(startPath) < hp.arrayLast(targetPath) - 1 // if equal, not moved
+        }
         return startTree !== targetTree || startPath.toString() !== targetPath.toString()
       }
+      function isDownwardsSameLevelMove() {
+        const {startTree, targetTree, startPath, targetPath} = store
+        return startTree === targetTree && startPath.length === targetPath.length && startPath.slice(0, startPath.length - 1).toString() === targetPath.slice(0, targetPath.length - 1).toString() && hp.arrayLast(startPath) < hp.arrayLast(targetPath)
+      }
     },
   })
   return {destroy, options, optionsUpdated}