Skip to content

Commit ba0cbef

Browse files
author
yinquan
committed
3.0.0
- added: - the enableDragNodeOut property - the enableDropExternalElement property - the useDefaultIsDroppable property - the useDefaultDrop property - the dragAndDrop.status property - the treeId property - the input slot - fixed: - the cursor and the ghost image blinked when the user dragged a node over the edge of another node. - the input box's width didn't fit its content well. - the input box's content wasn't selected when a node's title was switched to edit mode. - the contextmenu wasn't fully displayed if parts of it was outside the container with overflow:hidden. - security: - upgraded some dependencies.
1 parent 6291ffb commit ba0cbef

File tree

10 files changed

+5044
-4293
lines changed

10 files changed

+5044
-4293
lines changed

‎CHANGELOG.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
3.0.0
2+
- added:
3+
- the enableDragNodeOut property
4+
- the enableDropExternalElement property
5+
- the useDefaultIsDroppable property
6+
- the useDefaultDrop property
7+
- the dragAndDrop.status property
8+
- the treeId property
9+
- the input slot
10+
- fixed:
11+
- the cursor and the ghost image blinked when the user dragged a node over the edge of another node.
12+
- the input box's width didn't fit its content well.
13+
- the input box's content wasn't selected when a node's title was switched to edit mode.
14+
- the contextmenu wasn't fully displayed if parts of it was outside the container with overflow:hidden.
15+
- security:
16+
- upgraded some dependencies.
17+
118
2.14.0
219
- added:
320
- the autoHideContextMenu property

‎CHANGELOG.zh.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
3.0.0
2+
- 添加:
3+
- 属性 enableDragNodeOut
4+
- 属性 enableDropExternalElement
5+
- 属性 useDefaultIsDroppable
6+
- 属性 useDefaultDrop
7+
- 属性 treeId
8+
- 属性 dragAndDrop.status
9+
- 插槽 input slot
10+
- 修正:
11+
- 当用户拖动一个结点跨过一个结点的边缘时，鼠标及缩略图会闪烁。
12+
- 编辑一个结点的标题时，输入框的宽度不能很好地适应内容的长度。
13+
- 一个结点进入编辑模式时，内容不是选中状态。
14+
- 当父容器有overflow:hidden属性时，右键菜单可能会被遮挡。
15+
- 安全性:
16+
- 升级一些依赖包.
17+
118
2.14.0
219
- 添加:
320
- 属性 autoHideContextMenu

‎example/router/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import DragAndDropBasicExample from '../views/DragAndDropBasicExample.vue'
2020
import DragAndDropAdvancedExample from '../views/DragAndDropAdvancedExample.vue'
2121
import DragAndDropDisableExample from '../views/DragAndDropDisableExample.vue'
2222
import DragAndDropCustomAppearanceExample from '../views/DragAndDropCustomAppearanceExample.vue'
23+
import DragAndDropDragANodeOutExample from '../views/DragAndDropDragANodeOutExample.vue'
24+
import DragAndDropDropAnExternalElementExample from '../views/DragAndDropDropAnExternalElementExample.vue'
25+
import DragAndDropMultipleTreesExample from '../views/DragAndDropMultipleTreesExample.vue'
2326

2427
import CheckboxWithLinkageExample from '../views/CheckboxWithLinkageExample.vue'
2528
import CheckboxWithoutLinkageExample from '../views/CheckboxWithoutLinkageExample.vue'
@@ -159,6 +162,22 @@ const routes = [
159162
name: 'drag-and-drop-custom-appearance-example',
160163
component: DragAndDropCustomAppearanceExample
161164
},
165+
{
166+
path: '/:lang/example/drag-and-drop/drag-a-node-out',
167+
name: 'drag-and-drop-drag-a-node-out-example',
168+
component: DragAndDropDragANodeOutExample
169+
},
170+
{
171+
path: '/:lang/example/drag-and-drop/drop-an-external-element',
172+
name: 'drag-and-drop-drop-an-external-element-example',
173+
component: DragAndDropDropAnExternalElementExample
174+
},
175+
{
176+
path: '/:lang/example/drag-and-drop/multiple-trees',
177+
name: 'drag-and-drop-multiple-trees-example',
178+
component: DragAndDropMultipleTreesExample
179+
},
180+
162181

163182
{
164183
path: '/:lang/example/root-node/no-root-node',

‎example/views/DragAndDropDragANodeOutExample.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<div class="example-wrapper">
3+
<div class="panel">
4+
<TWTree :tree="tree" ref="tree" cass="tree" :enableDragNodeOut="true"/>
5+
<div
6+
class="container"
7+
@dragover="dragOver"
8+
@drop="dropNode">
9+
{{containerTitle}}
10+
</div>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import TWTree from '../../src/TWTree.vue'
17+
18+
export default {
19+
name: 'drag-and-drop-drag-a-node-out-example',
20+
components: {
21+
TWTree
22+
},
23+
data() {
24+
return {
25+
containerTitle: 'Drag a node here!',
26+
tree: [
27+
{
28+
id: 1,
29+
title: 'ROOT',
30+
hasChild: true,
31+
children: [
32+
{
33+
id: 2,
34+
title: 'child 1',
35+
},
36+
{
37+
id: 3,
38+
title: 'child 2',
39+
hasChild: true,
40+
children: [
41+
{
42+
id: 4,
43+
title: 'child 2-1'
44+
},
45+
{
46+
id: 5,
47+
title: 'child 2-2'
48+
},
49+
{
50+
id: 6,
51+
title: 'child 2-3'
52+
}
53+
],
54+
},
55+
{
56+
id: 7,
57+
title: 'child 3'
58+
},
59+
{
60+
id: 8,
61+
title: 'child 4'
62+
},
63+
{
64+
id: 9,
65+
title: 'child 5'
66+
},
67+
{
68+
id: 10,
69+
title: 'child 6'
70+
}
71+
]
72+
}
73+
]
74+
}
75+
},
76+
methods: {
77+
dragOver (event) {
78+
event.preventDefault()
79+
},
80+
dropNode (event) {
81+
let obj = JSON.parse(event.dataTransfer.getData('twtree'))
82+
let node = this.$refs.tree.getById(obj.nodeId)
83+
this.containerTitle = node.title
84+
this.$refs.tree.remove(node)
85+
}
86+
}
87+
}
88+
</script>
89+
90+
<style scoped>
91+
.panel {
92+
position: relative;
93+
}
94+
.panel .tree {
95+
width: 50%;
96+
}
97+
.btn {
98+
width: 100px;
99+
margin-right: 20px;
100+
}
101+
.info {
102+
display: block;
103+
width: 100%;
104+
text-align: left;
105+
}
106+
.key {
107+
font-weight: bold;
108+
font-size: 18px;
109+
}
110+
.container {
111+
padding: 0 2em;
112+
line-height: 100px;
113+
width: 150px;
114+
height: 100px;
115+
border: 2px dashed gray;
116+
position: absolute;
117+
left: 60%;
118+
top: 100px;
119+
}
120+
</style>

‎example/views/DragAndDropDropAnExternalElementExample.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<div class="example-wrapper">
3+
<div class="panel">
4+
<TWTree
5+
:tree="tree"
6+
ref="tree"
7+
class="tree"
8+
:enableDropExternalElement="true"
9+
@drop="drop"/>
10+
<div class="container">
11+
<div
12+
class="draggable-element"
13+
:draggable="true"
14+
@dragstart="dragStartHandler(i)"
15+
:key = i
16+
v-for="(title, i) of draggableElements">
17+
{{title}}
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import TWTree from '../../src/TWTree.vue'
26+
27+
export default {
28+
name: 'drag-and-drop-drop-an-external-element-example',
29+
components: {
30+
TWTree
31+
},
32+
data() {
33+
return {
34+
draggableElements: [
35+
'element 1',
36+
'element 2',
37+
'element 3'
38+
],
39+
draggedIdx: null,
40+
tree: [
41+
{
42+
id: 1,
43+
title: 'ROOT',
44+
hasChild: true,
45+
children: [
46+
{
47+
id: 2,
48+
title: 'child 1',
49+
},
50+
{
51+
id: 3,
52+
title: 'child 2',
53+
hasChild: true,
54+
children: [
55+
{
56+
id: 4,
57+
title: 'child 2-1'
58+
},
59+
{
60+
id: 5,
61+
title: 'child 2-2'
62+
},
63+
{
64+
id: 6,
65+
title: 'child 2-3'
66+
}
67+
],
68+
},
69+
{
70+
id: 7,
71+
title: 'child 3'
72+
},
73+
{
74+
id: 8,
75+
title: 'child 4'
76+
},
77+
{
78+
id: 9,
79+
title: 'child 5'
80+
},
81+
{
82+
id: 10,
83+
title: 'child 6'
84+
}
85+
]
86+
}
87+
]
88+
}
89+
},
90+
methods: {
91+
dragStartHandler (idx) {
92+
this.draggedIdx = idx
93+
},
94+
drop (dragAndOver) {
95+
if (dragAndOver.status !== 3) {
96+
return
97+
}
98+
99+
let title = this.draggableElements[this.draggedIdx]
100+
let node = {
101+
id: Date.now(),
102+
title: title,
103+
hasChild: false
104+
}
105+
106+
let overNode = dragAndOver.overNode
107+
switch (dragAndOver.overArea) {
108+
case 'prev':
109+
this.$refs.tree.create(node, overNode.__.parent, overNode.__.pos)
110+
break
111+
112+
case 'self':
113+
this.$refs.tree.create(node, overNode)
114+
break
115+
116+
case 'next':
117+
this.$refs.tree.create(node, overNode.__.parent, overNode.__.pos + 1)
118+
break
119+
}
120+
}
121+
}
122+
}
123+
</script>
124+
125+
<style scoped>
126+
.panel {
127+
position: relative;
128+
}
129+
.panel .tree {
130+
width: 50%;
131+
}
132+
.btn {
133+
width: 100px;
134+
margin-right: 20px;
135+
}
136+
.info {
137+
display: block;
138+
width: 100%;
139+
text-align: left;
140+
}
141+
.key {
142+
font-weight: bold;
143+
font-size: 18px;
144+
}
145+
.container {
146+
padding: 0 2em;
147+
width: 100px;
148+
border: 0;
149+
position: absolute;
150+
left: 60%;
151+
top: 100px;
152+
}
153+
.container .draggable-element {
154+
border: 1px solid gray;
155+
width: auto;
156+
height: 1em;
157+
padding: 0.2em;
158+
margin-bottom: 1em;
159+
font-size: 12px;
160+
}
161+
.container .draggable-element:hover {
162+
background-color: #bae7ff;
163+
}
164+
</style>

0 commit comments

Comments
 (0)