├── LICENSE
├── README.md
└── TreeNode.vue


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Ken Berkeley
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | For Vue.js 2.x see https://github.com/kenberkeley/vue2-drag-and-drop-demo
  2 | 
  3 | ***
  4 | 
  5 | # Vue Demo : Drag + Drop + Sort ([JS Bin](http://jsbin.com/gupebi/embed?html,js,output))
  6 | Thanks to [@bramblex](https://github.com/bramblex), the original post is [here](https://www.v2ex.com/t/300047)
  7 | 
  8 | `TreeNode.vue` ↓↓↓ (Practical usage: [vue-datatable-component - HeaderSettings.vue](https://github.com/kenberkeley/vue-datatable-component/blob/master/src/DataTable/HeaderSettings.vue))
  9 | 
 10 | ```vue
 11 | <template>
 12 |   <!-- [:draggable="{Boolean}"] 空节点不能被拖动，判断依据是是否存在 node.name -->
 13 |   <!-- [@dragover.prevent] 必须设置，否则浏览器默认是禁用拖动的 -->
 14 |   <div class="tree-node" :class="{ 'empty-node': !node.name }"
 15 |     :draggable="!!node.name"
 16 |     @dragover.prevent
 17 |     @dragstart.stop="handleDragStart"
 18 |     @drop.stop="handleDrop"
 19 |     @dragenter.stop="handleDragEnter"
 20 |     @dragleave.stop="handleDragLeave"
 21 |     @dragend.prevent="handleDragEnd">
 22 |     {{ node.name }}
 23 |     <div v-if="children && children.length" class="tree-node-children">
 24 |       <tree-node v-for="child in children"
 25 |         :vm.sync="vm" :node="child" :idx="$index">
 26 |       </tree-node>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | <script>
 31 | export default {
 32 |   name: 'tree-node', // 递归组件需指明 name
 33 |   props: {
 34 |     vm: { twoWay: true }, // 正在拖动的节点实例（TreeNode 组件通用，须双向绑定）
 35 |     node: Object, // 节点数据，形如 { name: 'xxx', children: [] }
 36 |     idx: Number // v-for 的索引，用于相邻节点的判别
 37 |   },
 38 |   computed: {
 39 |     children () { // 为每个子节点前后都生成空节点，便于实现兄弟节点间的“插入排序”
 40 |       // 举例：原本是 [N1, N2, N3]
 41 |       let { children } = this.node
 42 |       if (!children || !children.length) return []
 43 |       
 44 |       let _children = []
 45 |       children.forEach(child => _children.push({}, child))
 46 |       _children.push({})
 47 | 
 48 |       // 最后生成 [E1, N1, E2, N2, E3, N3, E4]（其中 N 表示节点，E 表示空节点）
 49 |       return _children
 50 |     },
 51 |     isParent () { // 拖放限制 1：判断“我”是否为被拖动节点的父节点
 52 |       return this === this.vm.$parent
 53 |     },
 54 |     isNextToMe () { // 拖放限制 2：判断“我”是否为被拖动节点的相邻节点
 55 |       return this.$parent === this.vm.$parent && Math.abs(this.idx - this.vm.idx) === 1
 56 |     },
 57 |     isMeOrMyAncestor () { // 拖放限制 3：判断被拖动节点是否为“我”自身或“我”的祖先
 58 |       var p = this
 59 |       while (p) {
 60 |         if (this.vm === p) return true
 61 |         p = p.$parent
 62 |       }
 63 |     },
 64 |     isAllowToDrop () { // 上述拖放限制条件的综合
 65 |       return !(this.isParent || this.isNextToMe || this.isMeOrMyAncestor)
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     clearBgColor () { // 清理样式
 70 |       this.$el.style.backgroundColor = ''
 71 |     },
 72 |     handleDragStart () {
 73 |       this.vm = this // 设置本组件为当前正在拖动的实例，此举将同步 sync 到所有 TreeNode 实例
 74 |       this.$el.style.backgroundColor = 'silver'
 75 |     },
 76 |     handleDrop () {
 77 |       this.clearBgColor() // 此时 this 为目的地节点，vm 才是被拖动节点
 78 |       if (!this.isAllowToDrop) return
 79 | 
 80 |       // 无论如何都直接删除被拖动节点
 81 |       this.vm.$parent.node.children.$remove(this.vm.node)
 82 | 
 83 |       // 情况 1：拖入空节点，成其兄弟（使用 splice 插入节点）
 84 |       if (!this.node.name)
 85 |         return this.$parent.node.children.splice(this.idx / 2, 0, this.vm.node)
 86 | 
 87 |       // 情况2：拖入普通节点，成为其子
 88 |       if (!this.node.children) this.$set('node.children', []) // 须用 $set 引入双向绑定
 89 |       this.node.children.push(this.vm.node)
 90 |     },
 91 |     handleDragEnter () { // 允许拖放才会显示样式
 92 |       if (!this.isAllowToDrop) return
 93 |       this.$el.style.backgroundColor = 'yellow'
 94 |     },
 95 |     handleDragLeave () {
 96 |       this.clearBgColor()
 97 |     },
 98 |     handleDragEnd () {
 99 |       this.clearBgColor()
100 |     }
101 |   }
102 | }
103 | </script>
104 | <style>
105 | /* 普通节点 */
106 | .tree-node {
107 |   display: list-item;
108 |   list-style: none;
109 |   border-left: 1px dashed gray;
110 | }
111 | /* 空节点 */
112 | .tree-node.empty-node {
113 |   height: .5em;
114 |   list-style-type: none;
115 | }
116 | /* 层次缩进 */
117 | .tree-node-children {
118 |   margin-left: 2em;
119 | }
120 | </style>
121 | ```
122 | 


--------------------------------------------------------------------------------
/TreeNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- [:draggable="{Boolean}"] 空节点不能被拖动，判断依据是是否存在 node.name -->
  3 |   <!-- [@dragover.prevent] 必须设置，否则浏览器默认是禁用拖动的 -->
  4 |   <div class="tree-node" :class="{ 'empty-node': !node.name }"
  5 |     :draggable="!!node.name"
  6 |     @dragover.prevent
  7 |     @dragstart.stop="handleDragStart"
  8 |     @drop.stop="handleDrop"
  9 |     @dragenter.stop="handleDragEnter"
 10 |     @dragleave.stop="handleDragLeave"
 11 |     @dragend.prevent="handleDragEnd">
 12 |     {{ node.name }}
 13 |     <div v-if="children && children.length" class="tree-node-children">
 14 |       <tree-node v-for="child in children"
 15 |         :vm.sync="vm" :node="child" :idx="$index">
 16 |       </tree-node>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | <script>
 21 | export default {
 22 |   name: 'tree-node', // 递归组件需指明 name
 23 |   props: {
 24 |     vm: { twoWay: true }, // 正在拖动的节点实例（TreeNode 组件通用，须双向绑定）
 25 |     node: Object, // 节点数据，形如 { name: 'xxx', children: [] }
 26 |     idx: Number // v-for 的索引，用于相邻节点的判别
 27 |   },
 28 |   computed: {
 29 |     children () { // 为每个子节点前后都生成空节点，便于实现兄弟节点间的“插入排序”
 30 |       // 举例：原本是 [N1, N2, N3]
 31 |       let { children } = this.node
 32 |       if (!children || !children.length) return []
 33 |       
 34 |       let _children = []
 35 |       children.forEach(child => _children.push({}, child))
 36 |       _children.push({})
 37 | 
 38 |       // 最后生成 [E1, N1, E2, N2, E3, N3, E4]（其中 N 表示节点，E 表示空节点）
 39 |       return _children
 40 |     },
 41 |     isParent () { // 拖放限制 1：判断“我”是否为被拖动节点的父节点
 42 |       return this === this.vm.$parent
 43 |     },
 44 |     isNextToMe () { // 拖放限制 2：判断“我”是否为被拖动节点的相邻节点
 45 |       return this.$parent === this.vm.$parent && Math.abs(this.idx - this.vm.idx) === 1
 46 |     },
 47 |     isMeOrMyAncestor () { // 拖放限制 3：判断被拖动节点是否为“我”自身或“我”的祖先
 48 |       var p = this
 49 |       while (p) {
 50 |         if (this.vm === p) return true
 51 |         p = p.$parent
 52 |       }
 53 |     },
 54 |     isAllowToDrop () { // 上述拖放限制条件的综合
 55 |       return !(this.isParent || this.isNextToMe || this.isMeOrMyAncestor)
 56 |     }
 57 |   },
 58 |   methods: {
 59 |     clearBgColor () { // 清理样式
 60 |       this.$el.style.backgroundColor = ''
 61 |     },
 62 |     handleDragStart () {
 63 |       this.vm = this // 设置本组件为当前正在拖动的实例，此举将同步 sync 到所有 TreeNode 实例
 64 |       this.$el.style.backgroundColor = 'silver'
 65 |     },
 66 |     handleDrop () {
 67 |       this.clearBgColor() // 此时 this 为目的地节点，vm 才是被拖动节点
 68 |       if (!this.isAllowToDrop) return
 69 | 
 70 |       // 无论如何都直接删除被拖动节点
 71 |       this.vm.$parent.node.children.$remove(this.vm.node)
 72 | 
 73 |       // 情况 1：拖入空节点，成其兄弟（使用 splice 插入节点）
 74 |       if (!this.node.name)
 75 |         return this.$parent.node.children.splice(this.idx / 2, 0, this.vm.node)
 76 | 
 77 |       // 情况2：拖入普通节点，成为其子
 78 |       if (!this.node.children) this.$set('node.children', []) // 须用 $set 引入双向绑定
 79 |       this.node.children.push(this.vm.node)
 80 |     },
 81 |     handleDragEnter () { // 允许拖放才会显示样式
 82 |       if (!this.isAllowToDrop) return
 83 |       this.$el.style.backgroundColor = 'yellow'
 84 |     },
 85 |     handleDragLeave () {
 86 |       this.clearBgColor()
 87 |     },
 88 |     handleDragEnd () {
 89 |       this.clearBgColor()
 90 |     }
 91 |   }
 92 | }
 93 | </script>
 94 | <style>
 95 | /* 普通节点 */
 96 | .tree-node {
 97 |   display: list-item;
 98 |   list-style: none;
 99 |   border-left: 1px dashed gray;
100 | }
101 | /* 空节点 */
102 | .tree-node.empty-node {
103 |   height: .5em;
104 |   list-style-type: none;
105 | }
106 | /* 层次缩进 */
107 | .tree-node-children {
108 |   margin-left: 2em;
109 | }
110 | </style>
111 | 


--------------------------------------------------------------------------------