Я строю компонент дерева в Vue js, и теперь у меня возникают трудности с реализацией перетаскивания в компоненте дерева. Проблема в том, что я не знаю, с чего начать, я посмотрел код на GitHub, но я не мог понять, как он действительно работает
У меня есть этот код, пока не узнаешь:
Компонент дерева :
<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', // vue component name
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>
Основной компонент для отображения дерева:
<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>
Может кто-нибудь предложить мне какую-нибудь статью или простой материал, с которого я должен начать строить?