README_ko.md

vue-draggable-nested-tree vue

이 프로젝트는 드래그가 가능한 트리 컴포넌트입니다. 이 컴포넌트는 css를 포함하지 않으며, 데모를 사용하기위해 당신의 style을 추가할 필요가 있습니다. 데모의 style은 어렵지 않습니다.

• 데모
• ie11 예제
• 영어 문서
• 중국어 문서

터치

터치를 지원합니다 (1개의 아이템)

기부

페이팔 | 알리페이 | 위챗

목차

• vue-draggable-nested-tree
• install
• usage
  • import
  • data
  • template
  • template for old browsers(eg: IE)
• api
  • Tree props
    • Noraml - Tree props
    • Hooks - Tree props
    • draggableHelperInfo: {event, options, store}
  • Tree properties
  • Tree events
  • Tree methods
  • node properties
  • node deep properties example
• other
  • demo css
  • examples
  • draggable & droppable
  • Traverse tree
  • draggable library

설치

npm i vue-draggable-nested-tree

사용

함수 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

json 데이터

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}}

오래된 브라우저를 위한 template(eg: IE)

//- slot-scope="{data, store, vm}" may not work in old browsers, replace with slot-scope="slot"
Tree(:data="data" draggable crossTree)
  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

'store'는 tree에 있는 VM입니다.

Tree props

기본 - Tree props

// base tree
data: {}, // type Array
indent: {default: 16},
activatedClass: {default: 'active'},
openedClass: {default: 'open'},
space: {default: 10}, // space between node, unit px
// draggable tree
preventSelect: {default: true}, // if to prevent drag handler text be selected when drag, excluding input and textarea
getTriggerEl: {type: Function}, // get the el trigger drag, default is node self. arguments(nodeVm)
draggable: {}, // is the tree draggable, default false
droppable: {default: true}, // is the tree droppable, default true
crossTree: {}, // can a node of the tree be dragged into other tree, or receive other tree node

훅 - 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

{event, options, store}

Tree properties

// base
rootData, // generated by tree
// draggable
dplh, // drag placeholder. globally unique.
trees, // array, all trees in the app. globally unique.

Tree 이벤트

// store is the tree vm
drag(node), // on drag start.
drop(node, targetTree, oldTree), // after drop.
change(node, targetTree, oldTree), // after drop, only when the node position changed
nodeOpenChanged(node) // on a node is closed or open

• targetTree와 oldTree 는 tree vm입니다.
• oldTree is 오직 cross tree에서만 사용이 가능합니다. 그 외에는 null입니다..
• 만약 cross tree를 사용중이라면 targetTree와 oldTree 는 드롭할 때 값이 바뀔것입니다.

Tree 함수

pure(node, withChildren, after)
/*
pure
return a node data without runtime properties.(!: property which starts with '_' will be removed)
withChildren: optional. after: Function, optional
the 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 code
getPureData(after) { return this.pure(this.rootData, true, after).children } // after: Function, optional
deleteNode(node) { return hp.arrayRemove(node.parent.children, node) }
// add node: like array. eg: node.children.push(newNodeData)
// update node: just assign to the node properties directly
isNodeDraggable(node)
isNodeDroppable(node)

node 속성

// base
_id
_vm
parent
children: [],
open,
active: false,
style: {},
class: '',
innerStyle: {},
innerClass: '',
innerBackStyle: {},
innerBackClass: {},
// draggable
draggable // default true. Please check 'draggable & droppable' below
droppable // default true. Please check 'draggable & droppable' below
isDragPlaceHolder

node의 아래 속성 예제

node._vm // vm
node._vm.level // 노드 레벨
node._vm.store // 트리
node.parent._vm // 부모 node vm
node._vm.store

기타

데모 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;
}

예제

이 패키지를 clone합니다. 그리고,

npm install
npm run dev

• 기본 예제
• 트리의 최대 레벨설정

draggable & droppable

한개의 node는 기본으로 드래그&드랍이 사용 가능합니다. 당신은 node의 속성을 드래그&드랍으로 설정 가능합니다. 다른방법으로는 'drag'이벤트를 기다리다가 모든 데이터를 드래그 혹은 드랍속성으로 세팅하는것입니다.

Traverse tree

나의 다른 라이브러리인 tree-helper를 추천한다.. 그것은 2가지의 가로트리를 지원한다: depthFirstSearch, breadthFirstSearch.

draggable library

draggable-helper 드래그를 위한 제가 개발한 다른 라이브러리입니다.. 그리고 그것은 이 컴포넌트를 통해 사용하고 있습니다. 드래그 함수를 사용할 때 도움이 될것입니다.