Skip to content

Commit 3b7a369

Browse files
author
yinquan
committed
touch support
1 parent 76da6b4 commit 3b7a369

34 files changed

+9209
-3842
lines changed

‎CHANGELOG.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
4.0.0
2+
- added:
3+
- touch support for drag and drop operations.
4+
- the enableTouchSupport property.
5+
- the allowTouchOperationFromAnotherTree method.
6+
- the allowExternalTouchOperation method.
7+
- the isTheTouchOperationFromTheTree method.
8+
- the dragleavetree event.
9+
- the dragentertree event.
10+
11+
- security:
12+
- upgraded some dependencies.
13+
- replaced @rollup/plugin-buble with @rollup/plugin-babel.
14+
- replaced vue-jest with @vue/vue2-jest.
15+
116
3.8.3
217
- fixed:
318
- the input box cannot deselect the selection and move the cursor to the expected position when the user clicks in it in firefox.

‎CHANGELOG.zh.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1+
4.0.0
2+
- 添加:
3+
- 触屏拖拽支持。
4+
- 属性 enableTouchSupport。
5+
- 方法 allowTouchOperationFromAnotherTree。
6+
- 方法 allowExternalTouchOperation。
7+
- 方法 isTheTouchOperationFromTheTree。
8+
- 事件 dragleavetree
9+
- 事件 dragentertree
10+
- 安全性:
11+
- 升级了一些依赖包。
12+
- 包@rollup/plugin-buble 替换为 @rollup/plugin-babel。
13+
- 包vue-jest 替换为 @vue/vue2-jest。
14+
115
3.8.3
216
- 修正:
3-
- firefox中，编辑一个节点时，鼠标点击输入框中，输入框不能取消全选状态且光标未能移到指定位置
17+
- firefox中，编辑一个节点时，鼠标点击输入框中，输入框不能取消全选状态且光标未能移到指定位置。
418
- 安全性:
519
- 升级了一些依赖包。
620

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ A highly customizable tree component for vue.
2828
* 右键菜单
2929
* 按钮
3030
* 自定义外观
31+
* 触屏支持
3132

3233
## 文档
3334
* [文档](https://github.com/TinyWisp/twtree/wiki/%E6%96%87%E6%A1%A3)
@@ -136,6 +137,7 @@ export default {
136137
* context menu
137138
* button
138139
* customizable appearance
140+
* touch support
139141

140142
## Getting Started
141143

‎docs/css/app.c4146761.css renamed to ‎docs/css/app.fa881e78.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><script defer="defer" type="module" src="js/chunk-vendors.c01eec9f.js"></script><script defer="defer" type="module" src="js/app.9a5de6b2.js"></script><link href="css/app.c4146761.css" rel="stylesheet"><script defer="defer" src="js/chunk-vendors-legacy.e856efd2.js" nomodule></script><script defer="defer" src="js/app-legacy.9c83a4af.js" nomodule></script></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><script defer="defer" type="module" src="js/chunk-vendors.f0d34acf.js"></script><script defer="defer" type="module" src="js/app.4e1beb04.js"></script><link href="css/app.fa881e78.css" rel="stylesheet"><script defer="defer" src="js/chunk-vendors-legacy.b0208fd7.js" nomodule></script><script defer="defer" src="js/app-legacy.b3d3c3b4.js" nomodule></script></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

‎docs/js/app-legacy.9c83a4af.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/js/app-legacy.9c83a4af.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/app-legacy.b3d3c3b4.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app-legacy.b3d3c3b4.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.4e1beb04.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.4e1beb04.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.9a5de6b2.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/js/app.9a5de6b2.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/chunk-vendors-legacy.e856efd2.js renamed to ‎docs/js/chunk-vendors-legacy.b0208fd7.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/chunk-vendors-legacy.b0208fd7.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/chunk-vendors-legacy.e856efd2.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/chunk-vendors.c01eec9f.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎docs/js/chunk-vendors.c01eec9f.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/chunk-vendors.f0d34acf.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/chunk-vendors.f0d34acf.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/router/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ import DragAndDropDragANodeOutExample from '../views/DragAndDropDragANodeOutExam
2424
import DragAndDropDropAnExternalElementExample from '../views/DragAndDropDropAnExternalElementExample.vue'
2525
import DragAndDropMultipleTreesExample from '../views/DragAndDropMultipleTreesExample.vue'
2626

27+
import DragAndDropWithTouchSupportBasicExample from '../views/DragAndDropWithTouchSupportBasicExample.vue'
28+
import DragAndDropWithTouchSupportAdvancedExample from '../views/DragAndDropWithTouchSupportAdvancedExample.vue'
29+
import DragAndDropWithTouchSupportDragANodeOutExample from '../views/DragAndDropWithTouchSupportDragANodeOutExample.vue'
30+
import DragAndDropWithTouchSupportDropAnExternalElementExample from '../views/DragAndDropWithTouchSupportDropAnExternalElementExample.vue'
31+
import DragAndDropWithTouchSupportMultipleTreesExample from '../views/DragAndDropWithTouchSupportMultipleTreesExample.vue'
32+
2733
import CheckboxWithLinkageExample from '../views/CheckboxWithLinkageExample.vue'
2834
import CheckboxWithoutLinkageExample from '../views/CheckboxWithoutLinkageExample.vue'
2935
import CheckboxCustomAppearanceExample from '../views/CheckboxCustomAppearanceExample.vue'
@@ -180,6 +186,33 @@ const routes = [
180186
},
181187

182188

189+
{
190+
path: '/:lang/example/drag-and-drop-with-touch-support/basic',
191+
name: 'drag-and-drop-with-touch-support-basic-example',
192+
component: DragAndDropWithTouchSupportBasicExample
193+
},
194+
{
195+
path: '/:lang/example/drag-and-drop-with-touch-support/advanced',
196+
name: 'drag-and-drop-with-touch-support-advanced-example',
197+
component: DragAndDropWithTouchSupportAdvancedExample
198+
},
199+
{
200+
path: '/:lang/example/drag-and-drop-with-touch-support/drag-a-node-out',
201+
name: 'drag-and-drop-with-touch-support-drag-a-node-out-example',
202+
component: DragAndDropWithTouchSupportDragANodeOutExample
203+
},
204+
{
205+
path: '/:lang/example/drag-and-drop-with-touch-support/drop-an-external-element',
206+
name: 'drag-and-drop-with-touch-support-drop-an-external-element-example',
207+
component: DragAndDropWithTouchSupportDropAnExternalElementExample
208+
},
209+
{
210+
path: '/:lang/example/drag-and-drop-with-touch-support/multiple-trees',
211+
name: 'drag-and-drop-with-touch-support-multiple-trees-example',
212+
component: DragAndDropWithTouchSupportMultipleTreesExample
213+
},
214+
215+
183216
{
184217
path: '/:lang/example/root-node/no-root-node',
185218
name: 'root-node-no-root-node-example',

‎example/views/DragAndDropBasicExample.vue

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
<template>
22
<div class="example-wrapper">
33
<div class="panel">
4-
<TWTree :tree="tree" ref="tree" class="tree" @dragover="showInfo" @dragend="showInfo" />
4+
<TWTree
5+
:tree="tree"
6+
class="tree"
7+
@dragover="showInfo"
8+
@dragend="showInfo"
9+
@dragentertree="showInfo"
10+
@dragleavetree="showInfo"
11+
/>
512
</div>
613
<span class="info">
714
<span class="key">dragNode:</span> <span class="val">{{dragNode}}</span> <br>
815
<span class="key">overNode:</span> <span class="val">{{overNode}}</span> <br>
9-
<span class="key">overArea:</span> <span class="val">{{overArea}}</span>
16+
<span class="key">overArea:</span> <span class="val">{{overArea}}</span> <br>
17+
<span class="key">status:</span> <span class="val">{{status}}</span>
1018
</span>
1119
</div>
1220
</template>
@@ -24,6 +32,7 @@ export default {
2432
dragNode: '',
2533
overNode: '',
2634
overArea: '',
35+
status: '',
2736
tree: [
2837
{
2938
id: 1,
@@ -75,18 +84,17 @@ export default {
7584
}
7685
},
7786
methods: {
78-
showInfo() {
79-
let tree = this.$refs.tree
80-
81-
this.dragNode = tree.dragAndDrop.dragNode !== null
82-
? tree.dragAndDrop.dragNode.title
87+
showInfo(dragAndDrop) {
88+
this.dragNode = dragAndDrop.dragNode !== null
89+
? dragAndDrop.dragNode.title
8390
: ''
84-
this.overNode = tree.dragAndDrop.overNode !== null
85-
? tree.dragAndDrop.overNode.title
91+
this.overNode = dragAndDrop.overNode !== null
92+
? dragAndDrop.overNode.title
8693
: ''
87-
this.overArea = tree.dragAndDrop.overArea !== null
88-
? tree.dragAndDrop.overArea
94+
this.overArea = dragAndDrop.overArea !== null
95+
? dragAndDrop.overArea
8996
: ''
97+
this.status = dragAndDrop.status
9098
}
9199
}
92100
}

‎example/views/DragAndDropDropAnExternalElementExample.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,16 +91,16 @@ export default {
9191
dragStartHandler (idx) {
9292
this.draggedIdx = idx
9393
},
94-
drop (dragAndOver) {
94+
drop (dragAndDrop) {
9595
let title = this.draggableElements[this.draggedIdx]
9696
let node = {
9797
id: Date.now(),
9898
title: title,
9999
hasChild: false
100100
}
101101
102-
let overNode = dragAndOver.overNode
103-
switch (dragAndOver.overArea) {
102+
let overNode = dragAndDrop.overNode
103+
switch (dragAndDrop.overArea) {
104104
case 'prev':
105105
this.$refs.tree.create(node, overNode.__.parent, overNode.__.pos)
106106
break

‎example/views/DragAndDropMultipleTreesExample.vue

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
import TWTree from '../../src/TWTree.vue'
2626
2727
export default {
28-
name: 'drag-and-drop-drop-an-external-element-example',
28+
name: 'drag-and-drop-multiple-trees-example',
2929
components: {
3030
TWTree
3131
},
@@ -134,24 +134,23 @@ export default {
134134
}
135135
},
136136
methods: {
137-
drop (thisTreeId, dragAndOver, event) {
138-
if (dragAndOver.status !== 3) {
137+
drop (thisTreeId, dragAndDrop) {
138+
if (dragAndDrop.status !== 3) {
139139
return
140140
}
141141
142-
let obj = JSON.parse(event.dataTransfer.getData('twtree'))
143-
let fromTree = this.$refs[obj.treeId]
144-
let dragNode = fromTree.getById(obj.nodeId)
142+
let fromTree = this.$refs[dragAndDrop.from.treeId]
143+
let dragNode = fromTree.getById(dragAndDrop.from.nodeId)
145144
let toTree = this.$refs[thisTreeId]
146-
let overNode = dragAndOver.overNode
145+
let overNode = dragAndDrop.overNode
147146
148147
let node = {
149148
id: Date.now(),
150-
title: obj.treeId + ' ' + dragNode.title,
149+
title: dragAndDrop.from.treeId + ' ' + dragNode.title,
151150
hasChild: false
152151
}
153152
154-
switch (dragAndOver.overArea) {
153+
switch (dragAndDrop.overArea) {
155154
case 'prev':
156155
toTree.create(node, overNode.__.parent, overNode.__.pos)
157156
fromTree.remove(dragNode)
@@ -168,7 +167,7 @@ export default {
168167
break
169168
}
170169
}
171-
}
170+
},
172171
}
173172
</script>
174173

‎example/views/DragAndDropWithTouchSupportAdvancedExample.vue

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<template>
2+
<div class="example-wrapper">
3+
<div class="panel">
4+
<TWTree
5+
ref="tree"
6+
class="tree"
7+
:tree="tree"
8+
:fnBeforeDrag="beforeDrag"
9+
:fnIsDroppable="isDroppable"
10+
:enableTouchSupport="true"
11+
@dragover="showInfo"
12+
@dragend="showInfo"
13+
/>
14+
</div>
15+
<span class="info">
16+
<span class="key">dragNode:</span> <span class="val">{{dragNode}}</span> <br>
17+
<span class="key">overNode:</span> <span class="val">{{overNode}}</span> <br>
18+
<span class="key">overArea:</span> <span class="val">{{overArea}}</span>
19+
</span>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import TWTree from '../../src/TWTree.vue'
25+
26+
export default {
27+
name: 'drag-and-drop-with-touch-support-advanced-example',
28+
components: {
29+
TWTree
30+
},
31+
data() {
32+
return {
33+
dragNode: '',
34+
overNode: '',
35+
overArea: '',
36+
tree: [
37+
{
38+
id: 1,
39+
title: 'ROOT',
40+
hasChild: true,
41+
children: [
42+
{
43+
id: 2,
44+
title: 'child 1',
45+
},
46+
{
47+
id: 3,
48+
title: 'child 2',
49+
hasChild: true,
50+
children: [
51+
{
52+
id: 4,
53+
title: 'not draggable',
54+
draggable: false
55+
},
56+
{
57+
id: 5,
58+
title: 'child 2-2'
59+
},
60+
{
61+
id: 6,
62+
title: 'child 2-3'
63+
}
64+
],
65+
},
66+
{
67+
id: 7,
68+
title: 'child 3'
69+
},
70+
{
71+
id: 8,
72+
title: 'cannot drop before this node'
73+
},
74+
{
75+
id: 9,
76+
title: 'annot drop after this node'
77+
},
78+
{
79+
id: 10,
80+
title: 'cannot be parent'
81+
}
82+
]
83+
}
84+
]
85+
}
86+
},
87+
methods: {
88+
beforeDrag(node) {
89+
return node.draggable !== false
90+
},
91+
isDroppable(dragAndDrop) {
92+
//cannot drop before node 8
93+
if (dragAndDrop.overNode.id === 8 && dragAndDrop.overArea === 'prev') {
94+
return false
95+
}
96+
97+
if (dragAndDrop.overNode.id === 7 && dragAndDrop.overArea === 'next') {
98+
return false
99+
}
100+
101+
//cannot drop after node 9
102+
if (dragAndDrop.overNode.id === 9 && dragAndDrop.overArea === 'next') {
103+
return false
104+
}
105+
106+
if (dragAndDrop.overNode.id === 10 && dragAndDrop.overArea === 'prev') {
107+
return false
108+
}
109+
110+
//node 10 cannot be parent
111+
if (dragAndDrop.overNode.id === 10 && dragAndDrop.overArea === 'self') {
112+
return false
113+
}
114+
115+
return true
116+
},
117+
showInfo() {
118+
let tree = this.$refs.tree
119+
120+
this.dragNode = tree.dragAndDrop.dragNode !== null
121+
? tree.dragAndDrop.dragNode.title
122+
: ''
123+
this.overNode = tree.dragAndDrop.overNode !== null
124+
? tree.dragAndDrop.overNode.title
125+
: ''
126+
this.overArea = tree.dragAndDrop.overArea !== null
127+
? tree.dragAndDrop.overArea
128+
: ''
129+
}
130+
}
131+
}
132+
</script>
133+
134+
<style scoped>
135+
.panel .tree {
136+
width: 50%;
137+
}
138+
.btn {
139+
width: 100px;
140+
margin-right: 20px;
141+
}
142+
.info {
143+
display: block;
144+
width: 100%;
145+
text-align: left;
146+
}
147+
.key {
148+
font-weight: bold;
149+
font-size: 18px;
150+
}
151+
</style>

0 commit comments

Comments
 (0)