Skip to content

Commit 6b2963b

Browse files
phphephphe
committed
add examples
1 parent f57bf37 commit 6b2963b

File tree

4 files changed

+179
-58
lines changed

4 files changed

+179
-58
lines changed

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,11 @@ ondragend: {type: Function}, // hook. return false to prevent drop. arguments(no
8282
###### draggableHelperInfo: {event, options, store}
8383
### Tree properties
8484
```js
85+
// base
8586
rootData, // generated by tree
87+
// draggable
88+
dplh, // drag placeholder. globally unique.
89+
trees, // array, all trees in the app. globally unique.
8690
```
8791
### Tree events
8892
```js
@@ -131,6 +135,14 @@ innerBackClass: {},
131135
// draggable
132136
draggable // default true. Please check 'draggable & droppable' below
133137
droppable // default true. Please check 'draggable & droppable' below
138+
isDragPlaceHolder
139+
```
140+
#### node deep properties example
141+
```js
142+
node._vm // vm
143+
node._vm.store // tree
144+
node.parent._vm // parent node vm
145+
node._vm.store.
134146
```
135147
### demo css
136148
```css
@@ -160,10 +172,16 @@ droppable // default true. Please check 'draggable & droppable' below
160172
}
161173
```
162174
### examples
163-
todo
175+
clone the package, and
176+
```sh
177+
npm install
178+
npm run dev
179+
```
180+
* [Base](https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/Base.vue)
181+
* [MaxLevel](https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue)
164182
# other
165183
### draggable & droppable <a name="draggable_droppable"></a>
166-
A node is default draggable and droppable. You can set draggable and droppable property of a node. The another way is use hooks: isNodeDraggable and isNodeDroppable. The hook will override draggable or droppable property.
184+
A node is default draggable and droppable. You can set draggable and droppable property of a node. The another way is listen event 'drag', traverse all data to set draggable or droppable property.
167185
### Traverse tree
168186
Recommend to use my other library [tree-helper](https://github.com/phphe/tree-helper). It has 2 traverse methods: depthFirstSearch, breadthFirstSearch.
169187
### draggable library

‎src/App.vue‎

Lines changed: 16 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,35 @@
11
<!-- this is an example -->
22
<template lang="pug">
3-
#app(style="height:10000px")
4-
Tree(:data="data" draggable crossTree ref="tree1" @change="tree1Change")
5-
div(slot-scope="{data, store}")
6-
b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
7-
span {{data.text}}-level:{{data.level}}
8-
Tree(:data="data2" draggable crossTree)
9-
div(slot-scope="{data, store}")
10-
b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
11-
span {{data.text}}-level:{{data.level}}
3+
#app
4+
BaseTree.mr
5+
MaxLevelTree.mr
126
</template>
137

148
<script>
15-
import Tree from '@/components/DraggableTree'
9+
import BaseTree from '@/examples/Base'
10+
import MaxLevelTree from '@/examples/MaxLevel'
1611
export default {
17-
components: {Tree},
18-
data() {
19-
return {
20-
data: [
21-
{text: 'node 1'},
22-
{text: 'node 2'},
23-
{text: 'node 3'},
24-
{text: 'node 4'},
25-
{text: 'node 4 undroppable', droppable: false},
26-
{text: 'node 5', children: [
27-
{text: 'node 1'},
28-
{text: 'node 2', children: [
29-
{text: 'node 3'},
30-
{text: 'node 4'},
31-
]},
32-
{text: 'node 2 undroppable', droppable: false, children: [
33-
{text: 'node 3'},
34-
{text: 'node 4'},
35-
]},
36-
{text: 'node 2', children: [
37-
{text: 'node 3'},
38-
{text: 'node 4 undroppable', droppable: false},
39-
]},
40-
{text: 'node 3'},
41-
{text: 'node 4'},
42-
{text: 'node 3'},
43-
{text: 'node 4'},
44-
{text: 'node 3'},
45-
{text: 'node 4'},
46-
{text: 'node 3'},
47-
{text: 'node 4'},
48-
]},
49-
],
50-
data2: [
51-
{text: 'node 1'},
52-
{text: 'node 2'},
53-
{text: 'node 3'},
54-
{text: 'node 4'},
55-
],
56-
data0: null,
57-
}
58-
},
12+
components: {BaseTree, MaxLevelTree},
13+
// data() {
14+
// return {
15+
// }
16+
// },
5917
// computed: {},
6018
// watch: {},
61-
methods: {
62-
tree1Change(node) {
63-
},
64-
},
19+
// methods: {},
6520
// created() {},
6621
// mounted() {},
6722
}
6823
</script>
6924

7025
<style lang="scss">
7126
#app{
27+
display: flex;
28+
}
29+
.mr{
30+
margin-right: 1em;
7231
}
32+
// ===============
7333
.he-tree{
7434
border: 1px solid #ccc;
7535
padding: 20px;

‎src/examples/Base.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!-- this is an example -->
2+
<template lang="pug">
3+
div
4+
h2 Base
5+
Tree(:data="originalData" draggable crossTree ref="tree1" @change="tree1Change")
6+
div(slot-scope="{data, store}")
7+
b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
8+
span {{data.text}}-level:{{data.level}}
9+
</template>
10+
11+
<script>
12+
import Tree from '@/components/DraggableTree'
13+
export default {
14+
components: {Tree},
15+
data() {
16+
return {
17+
originalData: [
18+
{text: 'node 1'},
19+
{text: 'node 2'},
20+
{text: 'node 3'},
21+
{text: 'node 4'},
22+
{text: 'node 4 undroppable', droppable: false},
23+
{text: 'node 5', children: [
24+
{text: 'node 1'},
25+
{text: 'node 2', children: [
26+
{text: 'node 3'},
27+
{text: 'node 4'},
28+
]},
29+
{text: 'node 2 undroppable', droppable: false, children: [
30+
{text: 'node 3'},
31+
{text: 'node 4'},
32+
]},
33+
{text: 'node 2', children: [
34+
{text: 'node 3'},
35+
{text: 'node 4 undroppable', droppable: false},
36+
]},
37+
{text: 'node 3'},
38+
{text: 'node 4'},
39+
{text: 'node 3'},
40+
{text: 'node 4'},
41+
{text: 'node 3'},
42+
{text: 'node 4'},
43+
{text: 'node 3'},
44+
{text: 'node 4'},
45+
]},
46+
],
47+
data: null,
48+
}
49+
},
50+
// computed: {},
51+
// watch: {},
52+
methods: {
53+
tree1Change(node, targetTree) {
54+
this.data = targetTree.getPureData()
55+
},
56+
},
57+
// created() {},
58+
// mounted() {},
59+
}
60+
</script>
61+
62+
<style lang="scss">
63+
</style>

‎src/examples/MaxLevel.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!-- this is an example -->
2+
<template lang="pug">
3+
div
4+
h2 Max Level 2
5+
Tree(:data="originalData" draggable crossTree ref="tree1" @drag="ondrag")
6+
div(slot-scope="{data, store}")
7+
b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
8+
span {{data.text}}-level:{{data.level}}-droppable:{{data.droppable}}
9+
</template>
10+
11+
<script>
12+
import Tree from '@/components/DraggableTree'
13+
import * as th from 'tree-helper'
14+
15+
export default {
16+
components: {Tree},
17+
data() {
18+
return {
19+
originalData: [
20+
{text: 'node 1'},
21+
{text: 'node 2'},
22+
{text: 'node 3'},
23+
{text: 'node 4'},
24+
{text: 'node 4 undroppable', droppable: false},
25+
{text: 'node 5', children: [
26+
{text: 'node 1'},
27+
{text: 'node 2', children: [
28+
{text: 'node 3'},
29+
{text: 'node 4'},
30+
]},
31+
{text: 'node 2 undroppable', droppable: false, children: [
32+
{text: 'node 3'},
33+
{text: 'node 4'},
34+
]},
35+
{text: 'node 2', children: [
36+
{text: 'node 3'},
37+
{text: 'node 4 undroppable', droppable: false},
38+
]},
39+
{text: 'node 3'},
40+
{text: 'node 4'},
41+
{text: 'node 3'},
42+
{text: 'node 4'},
43+
{text: 'node 3'},
44+
{text: 'node 4'},
45+
{text: 'node 3'},
46+
{text: 'node 4'},
47+
]},
48+
],
49+
data: null,
50+
}
51+
},
52+
// computed: {},
53+
// watch: {},
54+
methods: {
55+
ondrag(node) {
56+
const maxLevel = 2
57+
let nodeLevels = 1
58+
th.depthFirstSearch(node, (childNode) => {
59+
if (childNode.level > nodeLevels) {
60+
nodeLevels = childNode.level
61+
}
62+
})
63+
nodeLevels = nodeLevels - node.level + 1
64+
const childNodeMaxLevel = maxLevel - nodeLevels + 1
65+
//
66+
th.depthFirstSearch(this.originalData, (childNode) => {
67+
if (childNode === node) {
68+
return 'skip children'
69+
}
70+
childNode.droppable = childNode.level < childNodeMaxLevel
71+
})
72+
},
73+
},
74+
// created() {},
75+
// mounted() {},
76+
}
77+
</script>
78+
79+
<style lang="scss">
80+
</style>

0 commit comments

Comments
 (0)