feat(draggable plugin): add event after-move

Author: phphe

package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "draggable-helper": "^5.0.3",
+    "draggable-helper": "^5.0.4",
     "helper-js": "^2.0.1",
     "vue-functions": "^2.0.6",
     "vue-runtime-helpers": "^1.1.2"

src/examples/InScrollBox.vue

@@ -2,8 +2,8 @@
 <template lang="pug">
 .InScrollBox
   h2 In scroll box
-  .scrollbox()
-    Tree(:value="treeData" ref="tree" edgeScroll)
+  .scrollbox(ref="scrollbox")
+    Tree(:value="treeData" ref="tree" edgeScroll @after-move="afterMove")
       div(slot-scope="{node, index, path, tree}")
         b(v-if="node.children && node.children.length > 0" @click="tree.toggleFold(node, path)") {{node.$folded ? '+' : '-'}}&nbsp;
         input(type="checkbox" :checked="node.$checked" @change="tree.toggleCheck(node, path)")
@@ -47,7 +47,24 @@ export default {
   },
   // computed: {},
   // watch: {},
-  methods: {},
+  methods: {
+    afterMove(store) {
+      const closestBranch = store.oneMoveStore?.info?.closestBranch
+      const {placeholder} = store
+      if (closestBranch && placeholder) {
+        if (placeholder.parentElement.parentElement === closestBranch) {
+          // is child
+          console.log('child');
+        } else if (placeholder.nextSibling === closestBranch) {
+          // is previous sibling
+          console.log('previous');
+        } else if (placeholder.previousSibling === closestBranch) {
+          // is next sibling
+          console.log('next');
+        }
+      }
+    },
+  },
   // created() {},
   mounted() {
   },

src/plugins/draggable/Draggable.vue

@@ -22,6 +22,8 @@ export default {
     edgeScrollTriggerMargin: {type: Number, default: 50},
     edgeScrollSpeed: {type: Number, default: 0.35},
     edgeScrollTriggerMode: {type: String, default: 'top_left_corner'},
+    edgeScrollSpecifiedContainerX: {}, // HTMLElement || ((store) => HTMLElement)
+    edgeScrollSpecifiedContainerY: {}, // HTMLElement || ((store) => HTMLElement)
     preventTextSelection: {type: Boolean, default: true},
   },
   // components: {},
@@ -135,6 +137,8 @@ export default {
       edgeScrollTriggerMargin: this.edgeScrollTriggerMargin,
       edgeScrollSpeed: this.edgeScrollSpeed,
       edgeScrollTriggerMode: this.edgeScrollTriggerMode,
+      edgeScrollSpecifiedContainerX: this.edgeScrollSpecifiedContainerX,
+      edgeScrollSpecifiedContainerY: this.edgeScrollSpecifiedContainerY,
       rtl: this.rtl,
       preventTextSelection: this.preventTextSelection,
       treeClass: 'he-tree',
@@ -212,6 +216,7 @@ export default {
         if (startTree.hasHook('ondragstart') && startTree.executeHook('ondragstart', [startTree, store]) === false) {
           return false
         }
+        store.startTree.$emit('before-first-move', store)
         store.startTree.$emit('drag', store)
         this.$root.$emit('he-tree-drag', store)
       },
@@ -236,12 +241,14 @@ export default {
           return false
         }
       },
+      afterMove: (store) => {
+        store.startTree.$emit('after-move', store)
+      },
       beforeDrop: (pathChanged, store) => {
         const {targetTree} = store
         if (targetTree.hasHook('ondragend') && targetTree.executeHook('ondragend', [targetTree, store]) === false) {
           return false
         }
-        targetTree.$emit('before-drop', store)
         this.$root.$emit('he-tree-before-drop', store)
       },
       afterDrop: (store, t) => {
@@ -316,7 +323,7 @@ export default {
     'unfoldWhenDragoverDelay', 
     'draggingNodePositionMode', 
     'cloneWhenDrag', 
-    'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 
+    'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY',
     'rtl',
     'preventTextSelection', 
     ].forEach(name => {

src/plugins/draggable/draggable.js

@@ -28,6 +28,9 @@ export default function makeTreeDraggable(treeEl, options = {}) {
     // edgeScrollTriggerMargin: 50,
     // edgeScrollSpeed: 0.35,
     // edgeScrollTriggerMode: 'top_left_corner',
+    // edgeScrol: 'top_left_corner',
+    // edgeScrollSpecifiedContainerX?: HTMLElement,
+    // edgeScrollSpecifiedContainerY?: HTMLElement,
     // rtl: false
     // preventTextSelection: boolean
     ...options,
@@ -42,6 +45,8 @@ export default function makeTreeDraggable(treeEl, options = {}) {
     edgeScrollTriggerMargin: options.edgeScrollTriggerMargin,
     edgeScrollSpeed: options.edgeScrollSpeed,
     edgeScrollTriggerMode: options.edgeScrollTriggerMode,
+    edgeScrollSpecifiedContainerX: options.edgeScrollSpecifiedContainerX,
+    edgeScrollSpecifiedContainerY: options.edgeScrollSpecifiedContainerY,
     rtl: options.rtl,
     preventTextSelection: options.preventTextSelection,
     updateMovedElementStyleManually: true,
@@ -302,6 +307,8 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       //
       hp.attachCache(info, info)
       hp.attachCache(conditions, conditions)
+      store.oneMoveStore.info = info
+      store.oneMoveStore.conditions = conditions
       // actions start ========================================
       const doAction = (name, ...args) => {
         if (!store._doActionQueue) {
@@ -434,6 +441,9 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       // actions end ========================================
       doDraggableDecision({options, event: store.moveEvent, store, opt: dhOptions, info, conditions, actions, doAction})
     },
+    afterMove: (store, dhOptions) => {
+      options.afterMove && options.afterMove(store, dhOptions)
+    },
     beforeDrop: async (store, dhOptions) => {
       const {endEvent} = store
       const movingEl = store.movedElement // branch

types/index.d.ts

@@ -162,7 +162,11 @@ export class Draggable extends Vue{
   @Prop({default: 0.35})
   edgeScrollSpeed: number
   @Prop({default: 'top_left_corner'})
-  edgeScrollTriggerMode: 'top_left_corner'|'mouse'
+  edgeScrollTriggerMode: dh.Options['edgeScrollTriggerMode']
+  @Prop()
+  edgeScrollSpecifiedContainerX: dh.Options['edgeScrollSpecifiedContainerX']
+  @Prop()
+  edgeScrollSpecifiedContainerY: dh.Options['edgeScrollSpecifiedContainerY']
   // data
   treesStore: {store: Store} // just for get the darg info store
   // methods