#55: Callbacks for Drop/Drag start

amsik · Oct 17, 2018 · 564725b · 564725b
1 parent 13c80d9
commit 564725b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/demo/pages/dnd.html b/demo/pages/dnd.html
@@ -64,7 +64,14 @@
               state: 'OPTIONS'
             },
             deletion: true,
-            dnd: true,
+            dnd: {
+              onDragStart(node) {
+                return node.data.isNotDraggable !== true
+              },
+              onDragFinish(targetNode, destinationNode) {
+                return destinationNode.data.isNotDroppable !== true
+              }
+            },
             checkbox: true
           }
         }),
@@ -109,11 +116,18 @@
                   ]},
                   { MY_TEXT: 'Structural Design Patterns'}
                 ]},
-                { MY_TEXT: 'MV* PATTERNS', cildren: [
+                { MY_TEXT: 'MV* PATTERNS', KIDS: [
                   { MY_TEXT: 'MVC Pattern' },
                   { MY_TEXT: 'MVP Pattern' },
                   { MY_TEXT: 'MVVM Pattern' }
                 ]}
+              ]},
+              { MY_TEXT: 'NOT Draggable VIA function', data: { isNotDraggable: true } },
+              { MY_TEXT: 'Game Engines', OPTIONS: { expanded: true }, KIDS: [
+                { MY_TEXT: 'MelonJS' },
+                { MY_TEXT: 'ImpactJS' },
+                { MY_TEXT: 'LimeJS' },
+                { MY_TEXT: 'NOT DROPPADBLE VIA function', data: { isNotDroppable: true } },
               ]}
             ]
           }

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "liquor-tree",
   "description": "A Vue.js tree component.",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "author": "Kostiantyn <[email protected]>",
   "library": "LiquorTree",
   "homepage": "https://amsik.github.io/liquor-tree/",

diff --git a/src/lib/Node.js b/src/lib/Node.js
@@ -400,7 +400,7 @@ export default class Node {
   }
 
   startDragging () {
-    if (this.disabled() || this.state('draggable') === false || this.state('dragging')) {
+    if (!this.isDraggable() || this.state('dragging')) {
       return false
     }
 

diff --git a/src/mixins/DndMixin.js b/src/mixins/DndMixin.js
@@ -72,14 +72,22 @@ function highlightDropDestination (e, element) {
   return dropPosition
 }
 
+function callDndCb (args, opts, method) {
+  if (!opts || !opts[method] || typeof opts[method] !== 'function') {
+    return
+  }
+
+  return !!opts[method](...args)
+}
+
 export default {
   methods: {
     onDragStart (e) {
       e.preventDefault()
     },
 
     startDragging (node, event) {
-      if (!node.isDraggable()) {
+      if (!node.isDraggable() || callDndCb([node], this.tree.options.dnd, 'onDragStart') === false) {
         return
       }
 
@@ -102,7 +110,7 @@ export default {
           e.stopPropagation()
         }
 
-        if (this.$$dropDestination) {
+        if (this.$$dropDestination && this.tree.isNode(this.$$dropDestination)) {
           updateHelperClasses(this.$$dropDestination.vm.$el, null)
 
           this.draggableNode.node.finishDragging(this.$$dropDestination, dropPosition)
@@ -147,7 +155,13 @@ export default {
           if (!this.$$dropDestination || this.$$dropDestination.id !== dropDestinationId) {
             this.$$dropDestination = this.tree.getNodeById(dropDestinationId)
 
-            if (!this.$$dropDestination.isDropable()) {
+            const cbResult = callDndCb(
+              [this.draggableNode.node, this.$$dropDestination],
+              this.tree.options.dnd,
+              'onDragFinish'
+            )
+
+            if (!this.$$dropDestination.isDropable() || cbResult === false) {
               this.$$dropDestination = null
               return
             }