vue-draggable-nested-tree vue 可拖拽树, 可跨树拖拽

touch

Donation / 打赏

Indexes

install

npm i vue-draggable-nested-tree

usage

import

import{DraggableTree}from"vue-draggable-nested-tree";// 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"draggablecrossTree)  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}}

template for old browsers(eg: IE)

//- slot-scope="{data, store, vm}" may not work in old browsers, replace with slot-scope="slot"Tree(:data="data"draggablecrossTree)  div(slot-scope="slot")    //- data is node    //- store is the tree    //- vm is node Vue instance, you can get node level by vm.level    template(v-if="!slot.data.isDragPlaceHolder")      b(v-if="slot.data.children && slot.data.children.length"@click="slot.store.toggleOpen(slot.data)") {{slot.data.open ? '-' : '+'}}       span {{slot.data.text}}

api

Tree props

Noraml - Tree props

// base treedata:{},// type Arrayindent:{default:16},activatedClass:{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 vmdrag(node),// on drag start.drop(node,targetTree,oldTree),// after drop.change(node,targetTree,oldTree),// after drop, only when the node position changednodeOpenChanged(node);// on a node is closed or open

Tree methods

pure(node,withChildren,after)/*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*/getNodeById(id)getActivated()getOpened()activeNode(node,inactiveOld)toggleActive(node,inactiveOld)openNode(node,closeOld)toggleOpen(node,closeOld)// follow methods are easy, so I paste their soure codegetPureData(after){returnthis.pure(this.rootData,true,after).children}// after: Function, optionaldeleteNode(node){returnhp.arrayRemove(node.parent.children,node)}// add node: like array. eg: node.children.push(newNodeData)// update node: just assign to the node properties directlyisNodeDraggable(node)isNodeDroppable(node)

node properties

// base_id_vmparentchildren:[],open,active:false,style:{},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._vm.level;// 节点层级, 只读node._vm.store;// treenode.parent._vm;// parent node vmnode._vm.store;

other

demo css

.he-tree {border:1px solid#ccc;padding:20px;width:300px;}.tree-node {}.tree-node-inner {padding:5px;border:1px solid#ccc;cursor: pointer;}.draggable-placeholder {}.draggable-placeholder-inner {border:1px dashed#0088f8;box-sizing: border-box;background:rgba(0,136,249,0.09);color:#0088f9;text-align: center;padding:0;display: flex;align-items: center;}

examples

npm installnpm run dev

draggable & droppable

Traverse tree

draggable library