Async onDropValidators, disabled drag/drop

Fixes #22 and #24

Author: geekhybrid

dev/serve.vue

@@ -3,7 +3,7 @@ import json from './tree.json';
 import Vue3TreeVue from '@/tree-component.vue';
 import { ref } from '@vue/reactivity';
 import { defineComponent } from '@vue/runtime-core';
-import { TreeViewItem } from '@/types';
+import { TreeViewItem, IsValidDropCallback } from '@/types';
 
 export default defineComponent({
   name: 'ServeDev',
@@ -16,13 +16,19 @@ export default defineComponent({
 
     const onItemChecked = (checkedItems: TreeViewItem[]) => console.table(checkedItems);
     const onItemSelected = (item: TreeViewItem) => console.log(item);
-
+  
+    const makeApiCallToSeeIfDropIsValid: IsValidDropCallback = async (_source, _destination) => {
+      await fetch('www.wikipedia.com').then(() => true);
+      return true;
+    }
+  
     return {
       isCheckable: ref(true),
       hideGuidelines: ref(false),
       items,
       onItemChecked,
-      onItemSelected
+      onItemSelected,
+      makeApiCallToSeeIfDropIsValid
     }
   }
 });
@@ -48,7 +54,7 @@ export default defineComponent({
           :isCheckable="isCheckable"
           :hideGuideLines="hideGuidelines"
           :lazy-load="false"
-          @dropValidator="(_, __) => true"
+          @dropValidator="makeApiCallToSeeIfDropIsValid"
           @onSelect="onItemSelected"
           @onCheck="onItemChecked"
           style="width: 800px; display: block; border-right: 1px solid gray;">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-tree-vue",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "",
   "license": "MIT",
   "repository": {

src/composables/use-tree-mouse-actions.ts

@@ -43,23 +43,26 @@ export function useTreeViewItemMouseActions() {
         if (event.dataTransfer) {
             removeHoverClass(event)
             const droppedNode = JSON.parse(event.dataTransfer.getData('text/plain')) as _InternalItem;
-            if (!isDropValid || !isDropValid(droppedNode, dropHost)) return;
 
+            if (!isDropValid) return;
 
-            
             if (dropHost && droppedNode.id === dropHost.id) {
                 return
             }
-            
-            state!.detach(droppedNode.id);
 
-            if (dropHost && !dropHost.children)
-                dropHost.children = [];
+            isDropValid(droppedNode, dropHost).then((canDrop) => {
+                if (canDrop) {
+                    state!.detach(droppedNode.id);
 
-            if(dropHost)
-              dropHost!.children!.push(droppedNode);
-            else
-              state!.attach(droppedNode);// Dropping into root
+                    if (dropHost && !dropHost.children)
+                        dropHost.children = [];
+        
+                    if(dropHost)
+                      dropHost!.children!.push(droppedNode);
+                    else
+                      state!.attach(droppedNode);// Dropping into root
+                }
+            });
         }
     }
 

src/tree-component.vue

@@ -2,6 +2,7 @@
     <div class="vue3-tree-vue">
       <ul id="explorer" class="explorer tree-item-node-parent"
         :class="{'no-guide': hideGuideLines}"
+        :draggable="onDropValidator != undefined"
         @dragover.stop.prevent
         @dragenter.stop.prevent
         @dragover.stop="addRootHoverClass($event, parent == null)"

src/types.ts

@@ -33,4 +33,4 @@ export interface TreeEvents {
     updateSingleSelectedItem(): void;
 }
 
-export type IsValidDropCallback = (droppedItem: TreeViewItem, dropHost: TreeViewItem | undefined) => boolean;
+export type IsValidDropCallback = (droppedItem: TreeViewItem, dropHost: TreeViewItem | undefined) => Promise<boolean>;