I am currently working on creating a tree component in Vue.js, and I am facing challenges with implementing drag and drop functionality in the Tree component. I am unsure where to begin, as I have looked through similar code on GitHub but I am struggling to comprehend how it works.
This is the code I have so far:
Tree component:
<template>
<div class="tree">
<div @click.prevent="selectItem">
{{ item.label }}
<span class="icon" @click.stop="toggleNode">{{ expanded && isFolder ? '-' : '+' }}</span>
</div>
<ul v-show="expanded" v-if="isFolder">
<cmp-tree class="item" :key="index" v-for="(child, index) in item.children"
:current-item="currentItem"
:item="child"> </cmp-tree>
</ul>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
export default Vue.extend({
name: 'CmpTree',
props: {
item: Object as PropType<any>,
depth: { default: () => 0, type: Number },
currentItem: Number,
value: { default: () => null, type: Array }
},
data() {
return {
expanded: false as boolean,
showContext: false as boolean,
};
},
methods: {
toggleNode(): void {
this.expanded = !this.expanded;
},
selectItem() {
console.log(this.item);
},
},
computed: {
isFolder(): void {
return this.item.children && this.item.children.length
},
},
});
</script>
Main Component for Displaying Tree:
<template>
<div id="app">
<CmpTree v-for="(item, index) in items"
class="item"
:current-item="currentItem"
:item="item"
:key="index"
contextmenu>
</CmpTree>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import CmpTree from '@/components/CmpTree.vue';
export default Vue.extend({
name: 'ServeDev',
components: {
CmpTree
},
data(): any {
return {
items: [
{
label: 'item1',
children: [
{
label: 'item1.1'
},
{
label: 'item1.2',
children: [
{
label: 'item1.2.1'
},
{
label: 'item1.2.2'
}
]
}
]
},
{
label: 'item2'
}
],
selectedItems: [],
currentItem: null,
}
}
});
</script>
Can someone recommend any articles or resources that would help me get started with building this functionality?