vue-draggable-nested-tree vue可拖拽树, 可跨树拖拽
这是可拖拽树组件. 此组件没有css, 您需要自己添加您喜欢的样式, 参考demo, 只有几个样式, 不难.
此组件不负责节点的具体渲染, 暴露了一个节点渲染插槽, 请参考demo自行渲染.
This is a draggable tree component. This component does not have css, you need to add your style refer to demo. The demo style is less, not difficult.
This component doesn't render node. It exposes a node rendering slot. Please refer to the demo for rendering.
touch
已支持简单触摸(单点).
Support touch(single point).
Donation / 打赏
Paypal | Alipay/支付宝 | Wechat/微信
Indexes
install
npm i vue-draggable-nested-tree
usage
import
// vue-draggable-nested-tree contains Tree, TreeNode, DraggableTree, DraggableTreeNode// import the component and register it as global or local component
data
data: text: 'node 1' text: 'node 2' text: 'node 3 undraggable' draggable: false text: 'node 4' text: 'node 4 undroppable' droppable: false text: 'node 5' children: text: 'node 1' text: 'node 2' children: text: 'node 3' text: 'node 4' text: 'node 2 undroppable' droppable: false children: text: 'node 3' text: 'node 4' text: 'node 2' children: text: 'node 3' text: 'node 4 undroppable' droppable: false text: 'node 3' text: 'node 4' text: 'node 3' text: 'node 4' text: 'node 3' text: 'node 4' text: 'node 3' text: 'node 4'
template
Tree(:data="data" draggable crossTree) div(slot-scope="{data, store, vm}") //- data is node //- store is the tree //- vm is node Vue instance, you can get node level by vm.level template(v-if="!data.isDragPlaceHolder") b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}} span {{data.text}}
api
Tree props
Noraml - Tree props
// base treedata: {} // type Arrayindent: default: 16activatedClass: default: 'active'openedClass: default: 'open'space: default: 10 // space between node, unit px// draggable treepreventSelect: default: true // if to prevent drag handler text be selected when drag, excluding input and textareagetTriggerEl: type: Function // get the el trigger drag, default is node self. arguments(nodeVm)draggable: {} // is the tree draggable, default falsedroppable: default: true // is the tree droppable, default truecrossTree: {} // can a node of the tree be dragged into other tree, or receive other tree node
Hooks - Tree props
ondragstart: type: Function // hook. return false to prevent drag. arguments(node, draggableHelperInfo)ondragend: type: Function // hook. return false to prevent drop. arguments(node, draggableHelperInfo)
draggableHelperInfo
Tree properties
// baserootData // generated by tree// draggabledplh // drag placeholder. globally unique.trees // array, all trees in the app. globally unique.
Tree events
// store is the tree vm // on drag start. // after drop. // after drop, only when the node position changed // on a node is closed or open
- targetTree and oldTree are tree vm.
- oldTree is available only when cross tree. Otherwise null.
- if cross tree, both targetTree and oldTree will emit drop and change.
Tree methods
/*purereturn a node data without runtime properties.(!: property which starts with '_' will be removed)withChildren: optional. after: Function, optionalthe code about after(t is computed node data):if (after) { return after(t, node) || t}return t*/// follow methods are easy, so I paste their soure code { return thischildren } // after: Function, optional { return hp }// add node: like array. eg: node.children.push(newNodeData)// update node: just assign to the node properties directly
node properties
// base_id_vmparentchildren: openactive: falsestyle: {}class: ''innerStyle: {}innerClass: ''innerBackStyle: {}innerBackClass: {}// draggabledraggable // default true. Please check 'draggable & droppable' belowdroppable // default true. Please check 'draggable & droppable' belowisDragPlaceHolder
node deep properties example
node_vm // vmnode_vmlevel // 节点层级, 只读node_vmstore // treenodeparent_vm // parent node vmnode_vmstore
other
demo css
examples
clone the package, and
npm installnpm run dev
draggable & droppable
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.
Traverse tree
Recommend to use my other library tree-helper. It has 2 traverse methods: depthFirstSearch, breadthFirstSearch.
draggable library
draggable-helper is my another library for drag. And it also is using by this component. You can use it to help you drag functions.