-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- 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.- Loading branch information
yinquan
committed
Dec 6, 2020
1 parent
6291ffb
commit ba0cbef
Showing
10 changed files
with
5,044 additions
and
4,293 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <template> | ||
| <div class="example-wrapper"> | ||
| <div class="panel"> | ||
| <TWTree :tree="tree" ref="tree" cass="tree" :enableDragNodeOut="true"/> | ||
| <div | ||
| class="container" | ||
| @dragover="dragOver" | ||
| @drop="dropNode"> | ||
| {{containerTitle}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import TWTree from '../../src/TWTree.vue' | ||
| export default { | ||
| name: 'drag-and-drop-drag-a-node-out-example', | ||
| components: { | ||
| TWTree | ||
| }, | ||
| data() { | ||
| return { | ||
| containerTitle: 'Drag a node here!', | ||
| tree: [ | ||
| { | ||
| id: 1, | ||
| title: 'ROOT', | ||
| hasChild: true, | ||
| children: [ | ||
| { | ||
| id: 2, | ||
| title: 'child 1', | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'child 2', | ||
| hasChild: true, | ||
| children: [ | ||
| { | ||
| id: 4, | ||
| title: 'child 2-1' | ||
| }, | ||
| { | ||
| id: 5, | ||
| title: 'child 2-2' | ||
| }, | ||
| { | ||
| id: 6, | ||
| title: 'child 2-3' | ||
| } | ||
| ], | ||
| }, | ||
| { | ||
| id: 7, | ||
| title: 'child 3' | ||
| }, | ||
| { | ||
| id: 8, | ||
| title: 'child 4' | ||
| }, | ||
| { | ||
| id: 9, | ||
| title: 'child 5' | ||
| }, | ||
| { | ||
| id: 10, | ||
| title: 'child 6' | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| methods: { | ||
| dragOver (event) { | ||
| event.preventDefault() | ||
| }, | ||
| dropNode (event) { | ||
| let obj = JSON.parse(event.dataTransfer.getData('twtree')) | ||
| let node = this.$refs.tree.getById(obj.nodeId) | ||
| this.containerTitle = node.title | ||
| this.$refs.tree.remove(node) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .panel { | ||
| position: relative; | ||
| } | ||
| .panel .tree { | ||
| width: 50%; | ||
| } | ||
| .btn { | ||
| width: 100px; | ||
| margin-right: 20px; | ||
| } | ||
| .info { | ||
| display: block; | ||
| width: 100%; | ||
| text-align: left; | ||
| } | ||
| .key { | ||
| font-weight: bold; | ||
| font-size: 18px; | ||
| } | ||
| .container { | ||
| padding: 0 2em; | ||
| line-height: 100px; | ||
| width: 150px; | ||
| height: 100px; | ||
| border: 2px dashed gray; | ||
| position: absolute; | ||
| left: 60%; | ||
| top: 100px; | ||
| } | ||
| </style> |
164 changes: 164 additions & 0 deletions
164
example/views/DragAndDropDropAnExternalElementExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <template> | ||
| <div class="example-wrapper"> | ||
| <div class="panel"> | ||
| <TWTree | ||
| :tree="tree" | ||
| ref="tree" | ||
| class="tree" | ||
| :enableDropExternalElement="true" | ||
| @drop="drop"/> | ||
| <div class="container"> | ||
| <div | ||
| class="draggable-element" | ||
| :draggable="true" | ||
| @dragstart="dragStartHandler(i)" | ||
| :key = i | ||
| v-for="(title, i) of draggableElements"> | ||
| {{title}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import TWTree from '../../src/TWTree.vue' | ||
| export default { | ||
| name: 'drag-and-drop-drop-an-external-element-example', | ||
| components: { | ||
| TWTree | ||
| }, | ||
| data() { | ||
| return { | ||
| draggableElements: [ | ||
| 'element 1', | ||
| 'element 2', | ||
| 'element 3' | ||
| ], | ||
| draggedIdx: null, | ||
| tree: [ | ||
| { | ||
| id: 1, | ||
| title: 'ROOT', | ||
| hasChild: true, | ||
| children: [ | ||
| { | ||
| id: 2, | ||
| title: 'child 1', | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'child 2', | ||
| hasChild: true, | ||
| children: [ | ||
| { | ||
| id: 4, | ||
| title: 'child 2-1' | ||
| }, | ||
| { | ||
| id: 5, | ||
| title: 'child 2-2' | ||
| }, | ||
| { | ||
| id: 6, | ||
| title: 'child 2-3' | ||
| } | ||
| ], | ||
| }, | ||
| { | ||
| id: 7, | ||
| title: 'child 3' | ||
| }, | ||
| { | ||
| id: 8, | ||
| title: 'child 4' | ||
| }, | ||
| { | ||
| id: 9, | ||
| title: 'child 5' | ||
| }, | ||
| { | ||
| id: 10, | ||
| title: 'child 6' | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| methods: { | ||
| dragStartHandler (idx) { | ||
| this.draggedIdx = idx | ||
| }, | ||
| drop (dragAndOver) { | ||
| if (dragAndOver.status !== 3) { | ||
| return | ||
| } | ||
| let title = this.draggableElements[this.draggedIdx] | ||
| let node = { | ||
| id: Date.now(), | ||
| title: title, | ||
| hasChild: false | ||
| } | ||
| let overNode = dragAndOver.overNode | ||
| switch (dragAndOver.overArea) { | ||
| case 'prev': | ||
| this.$refs.tree.create(node, overNode.__.parent, overNode.__.pos) | ||
| break | ||
| case 'self': | ||
| this.$refs.tree.create(node, overNode) | ||
| break | ||
| case 'next': | ||
| this.$refs.tree.create(node, overNode.__.parent, overNode.__.pos + 1) | ||
| break | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .panel { | ||
| position: relative; | ||
| } | ||
| .panel .tree { | ||
| width: 50%; | ||
| } | ||
| .btn { | ||
| width: 100px; | ||
| margin-right: 20px; | ||
| } | ||
| .info { | ||
| display: block; | ||
| width: 100%; | ||
| text-align: left; | ||
| } | ||
| .key { | ||
| font-weight: bold; | ||
| font-size: 18px; | ||
| } | ||
| .container { | ||
| padding: 0 2em; | ||
| width: 100px; | ||
| border: 0; | ||
| position: absolute; | ||
| left: 60%; | ||
| top: 100px; | ||
| } | ||
| .container .draggable-element { | ||
| border: 1px solid gray; | ||
| width: auto; | ||
| height: 1em; | ||
| padding: 0.2em; | ||
| margin-bottom: 1em; | ||
| font-size: 12px; | ||
| } | ||
| .container .draggable-element:hover { | ||
| background-color: #bae7ff; | ||
| } | ||
| </style> |
Oops, something went wrong.