Add draggable/droppable flags

src/components/common/TreeExplorerTreeNode.vue

@@ -78,36 +78,41 @@ onMounted(() => {
   treeNodeElement.value = container.value?.closest(
     '.p-tree-node-content'
   ) as HTMLElement
-  dropTargetCleanup = dropTargetForElements({
+  if (props.node.droppable) {
-    element: treeNodeElement.value,
+    dropTargetCleanup = dropTargetForElements({
-    onDrop: (event) => {
+      element: treeNodeElement.value,
-      const dndData = event.source.data as TreeExplorerDragAndDropData
+      onDrop: (event) => {
-      if (dndData.type === 'tree-explorer-node') {
+        const dndData = event.source.data as TreeExplorerDragAndDropData
+        if (dndData.type === 'tree-explorer-node') {
+          canDrop.value = false
+          emit('itemDropped', props.node, dndData.data)
+        }
+      },
+      onDragEnter: (event) => {
+        const dndData = event.source.data as TreeExplorerDragAndDropData
+        if (dndData.type === 'tree-explorer-node') {
+          canDrop.value = true
+        }
+      },
+      onDragLeave: () => {
         canDrop.value = false
-        emit('itemDropped', props.node, dndData.data)
       }
-    },
+    })
-    onDragEnter: (event) => {
+  }
-      const dndData = event.source.data as TreeExplorerDragAndDropData
+
-      if (dndData.type === 'tree-explorer-node') {
+  if (props.node.draggable) {
-        canDrop.value = true
+    draggableCleanup = draggable({
-      }
+      element: treeNodeElement.value,
-    },
+      getInitialData() {
-    onDragLeave: () => {
+        return {
-      canDrop.value = false
+          type: 'tree-explorer-node',
-    }
+          data: props.node
-  })
+        }
-  draggableCleanup = draggable({
+      },
-    element: treeNodeElement.value,
+      onDragStart: () => emit('dragStart', props.node),
-    getInitialData() {
+      onDrop: () => emit('dragEnd', props.node)
-      return {
+    })
-        type: 'tree-explorer-node',
+  }
-        data: props.node
-      }
-    },
-    onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node)
-  })
 })
 onUnmounted(() => {
   dropTargetCleanup()

src/types/treeExplorerTypes.ts

@@ -15,6 +15,10 @@ export interface TreeExplorerNode<T = any> {
     node: TreeExplorerNode<T>,
     child: TreeExplorerNode<T>
   ) => void
+  // Whether the node is draggable
+  draggable?: boolean
+  // Whether the node is droppable
+  droppable?: boolean
 }
 
 export interface RenderedTreeExplorerNode<T = any> extends TreeExplorerNode<T> {