Disable Drag and Drop on Specific Branch. (#37)

* Disable drag and drop for specific node.

Remove dependency on `user`

* Update README.md

* Update package.json

Author: geekhybrid

README.md

@@ -30,7 +30,6 @@ import 'vue3-tree-vue/dist/style.css'; // remember to add this in your component
     const onItemChecked = (checkedItems: TreeViewItem[]) => console.log(checkedItems);
     const onItemSelected = (item: TreeViewItem) => console.log(item);
 
-
     // How to handle drag and drop logic
     const onBeforeItemDropped = (droppedItem: TreeViewItem, destinationNode: TreeViewItem | undefined) => {
           // destinationNode == undefined means dropping at the root of the tree.
@@ -91,6 +90,7 @@ export interface TreeViewItem {
   checked?: boolean;
   selected?: boolean;
   expanded?: boolean;
+  disableDragAndDrop?: boolean; // Disable drag and drop for a specific node.
   disabled?: boolean;// When disabled, an item can neither be selected nor checked
   meta?: any;// provides meta-data of any type per node.
 }

dev/serve.vue

@@ -101,7 +101,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style scoped>
+<style>
 * {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 14px;
@@ -114,4 +114,9 @@ button {
     color: blue;
     cursor: pointer;
 }
+
+.selected-tree-item {
+  background: blue !important;
+}
+
 </style>

dev/tree.json

@@ -56,8 +56,9 @@
     ]
   },
   {
-    "name": "System Design Playlist",
+    "name": "System Design Playlist (Not Draggable)",
     "id": 993029302938,
+    "disableDragAndDrop": true,
     "type": ".playlist",
     "children": [
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-tree-vue",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "",
   "license": "MIT",
   "repository": {
@@ -71,8 +71,5 @@
   },
   "engines": {
     "node": ">=12"
-  },
-  "dependencies": {
-    "user": "^0.0.0"
   }
 }

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

@@ -34,6 +34,7 @@ export function useTreeViewItemMouseActions() {
     }
 
     const onDragNode = (item: TreeViewItem, event: DragEvent): void => {
+        if (item.disableDragAndDrop) return;
         if (event.dataTransfer) {
             event.dataTransfer.setData('text/plain', JSON.stringify(item));
         }
@@ -46,7 +47,7 @@ export function useTreeViewItemMouseActions() {
 
             if (!isDropValid) return;
 
-            if (dropHost && droppedNode.id === dropHost.id) {
+            if (dropHost && droppedNode.id === dropHost.id || droppedNode.disableDragAndDrop) {
                 return
             }
 

src/types.ts

@@ -6,6 +6,7 @@ export interface TreeViewItem {
   selected?: boolean;
   expanded?: boolean;
   disabled?: boolean;
+  disableDragAndDrop?: boolean;
   meta?: any;
 }