diff --git a/README.md b/README.md index e33346a..9f36bc2 100644 --- a/README.md +++ b/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. } diff --git a/dev/serve.vue b/dev/serve.vue index 8e70d31..3716a99 100644 --- a/dev/serve.vue +++ b/dev/serve.vue @@ -101,7 +101,7 @@ export default defineComponent({ - diff --git a/dev/tree.json b/dev/tree.json index 2306968..6eed008 100644 --- a/dev/tree.json +++ b/dev/tree.json @@ -56,8 +56,9 @@ ] }, { - "name": "System Design Playlist", + "name": "System Design Playlist (Not Draggable)", "id": 993029302938, + "disableDragAndDrop": true, "type": ".playlist", "children": [ { diff --git a/package.json b/package.json index 1d20dd6..78f8078 100644 --- a/package.json +++ b/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" } } diff --git a/src/composables/use-tree-mouse-actions.ts b/src/composables/use-tree-mouse-actions.ts index 3d9e983..5401892 100644 --- a/src/composables/use-tree-mouse-actions.ts +++ b/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 } diff --git a/src/types.ts b/src/types.ts index f30c5e4..da2eda4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,6 +6,7 @@ export interface TreeViewItem { selected?: boolean; expanded?: boolean; disabled?: boolean; + disableDragAndDrop?: boolean; meta?: any; }