feat(event): add drop-before and drop-after

dev/App.vue

@@ -6,6 +6,9 @@
           @change-name="onChangeName"
           @delete-node="onDel"
           @add-node="onAddNode"
+          @drop="drop"
+          @drop-before="dropBefore"
+          @drop-after="dropAfter"
           :model="data"
           default-tree-node-name="new node"
           default-leaf-node-name="new leaf"
@@ -81,6 +84,18 @@
         console.log(params)
       },
 
+      drop: function ({node, src, target}) {
+        console.log('drop', node, src, target)
+      },
+
+      dropBefore: function ({node, src, target}) {
+        console.log('drop-before', node, src, target)
+      },
+
+      dropAfter: function ({node, src, target}) {
+        console.log('drop-after', node, src, target)
+      },
+
       addNode () {
         var node = new TreeNode({ name: 'new node', isLeaf: false })
         if (!this.data.children) this.data.children = []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "main": "dist/vue-tree-list.min.js",
   "scripts": {

readme.md

@@ -188,8 +188,9 @@ click | TreeNode | Trigger when clicking a tree node
 change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
 delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
 add-node | TreeNode | Trigger after adding a new node
-drop | {'node', 'oldParent'} | Trigger after dropping a node into another
+drop | {node, src, target} | Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into
-drop-up | {'node', 'oldParent'} | Trigger after extracting a node from another
+drop-before | {node, src, target} | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before
+drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after
 
 # customize operation icons
 The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:

src/VueTreeList.vue

@@ -2,7 +2,7 @@
   <div class='vtl'>
     <div v-if="model.name !== 'root'">
       <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
-        @drop="dropUp"
+        @drop="dropBefore"
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
         @dragleave="dragLeaveUp"></div>
@@ -63,7 +63,7 @@
       <div v-if="model.children && model.children.length > 0 && expanded"
         class="vtl-border vtl-bottom"
         :class="{'vtl-active': isDragEnterBottom}"
-        @drop="dropBottom"
+        @drop="dropAfter"
         @dragenter="dragEnterBottom"
         @dragover='dragOverBottom'
         @dragleave="dragLeaveBottom"></div>
@@ -89,7 +89,7 @@
   import { Tree, TreeNode } from './Tree.js'
   import { addHandler, removeHandler } from './tools.js'
 
-  let fromComp = null
+  let compInOperation = null
 
   export default {
     data: function () {
@@ -219,7 +219,7 @@
 
       dragStart(e) {
         if (!(this.model.dragDisabled || this.model.disabled)) {
-          fromComp = this
+          compInOperation = this
           // for firefox
           e.dataTransfer.setData("data","data");
           e.dataTransfer.effectAllowed = 'move'
@@ -228,14 +228,14 @@
         return false
       },
       dragEnd(e) {
-        fromComp = null
+        compInOperation = null
       },
       dragOver(e) {
         e.preventDefault()
         return true
       },
       dragEnter(e) {
-        if (!fromComp) return
+        if (!compInOperation) return
         if (this.model.isLeaf) return
         this.isDragEnterNode = true
       },
@@ -243,16 +243,16 @@
         this.isDragEnterNode = false
       },
       drop(e) {
-        if (!fromComp) return
+        if (!compInOperation) return
-        const oldParent = fromComp.model.parent;
+        const oldParent = compInOperation.model.parent;
-        fromComp.model.moveInto(this.model)
+        compInOperation.model.moveInto(this.model)
         this.isDragEnterNode = false
         var node = this.getRootNode();
-        node.$emit('drop', {node: fromComp.model, oldParent: oldParent})
+        node.$emit('drop', {target: this.model, node: compInOperation.model, src: oldParent})
       },
 
       dragEnterUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
         this.isDragEnterUp = true
       },
       dragOverUp (e) {
@@ -260,20 +260,20 @@
         return true
       },
       dragLeaveUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
         this.isDragEnterUp = false
       },
-      dropUp () {
+      dropBefore () {
-        if (!fromComp) return
+        if (!compInOperation) return
-        const oldParent = fromComp.model.parent;
+        const oldParent = compInOperation.model.parent;
-        fromComp.model.insertBefore(this.model)
+        compInOperation.model.insertBefore(this.model)
         this.isDragEnterUp = false
         var node = this.getRootNode();
-        node.$emit('drop-up', {node: fromComp.model, oldParent: oldParent})
+        node.$emit('drop-before', {target: this.model, node: compInOperation.model, src: oldParent})
       },
 
       dragEnterBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
         this.isDragEnterBottom = true
       },
       dragOverBottom (e) {
@@ -281,16 +281,16 @@
         return true
       },
       dragLeaveBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
         this.isDragEnterBottom = false
       },
-      dropBottom () {
+      dropAfter () {
-        if (!fromComp) return
+        if (!compInOperation) return
-        const oldParent = fromComp.model.parent;
+        const oldParent = compInOperation.model.parent;
-        fromComp.model.insertAfter(this.model)
+        compInOperation.model.insertAfter(this.model)
         this.isDragEnterBottom = false
         var node = this.getRootNode();
-        node.$emit('drop-bottom', {node: fromComp.model, oldParent: oldParent})
+        node.$emit('drop-after', {target: this.model, node: compInOperation.model, src: oldParent})
       },
       getRootNode() {
         var node = this.$parent