Nutrias Punching Marmots

    vue-draggable-nested-tree

    3.0.0-beta2 • Public • Published

    Please use the he-tree-vue, vue-draggable-nested-tree will no longer be maintained.

    请使用新发布的he-tree-vue, vue-draggable-nested-tree 将不再维护.

    Please use the he-tree-vue, vue-draggable-nested-tree will no longer be maintained.

    请使用新发布的he-tree-vue, vue-draggable-nested-tree 将不再维护.

    Please use the he-tree-vue, vue-draggable-nested-tree will no longer be maintained.

    请使用新发布的he-tree-vue, vue-draggable-nested-tree 将不再维护.

    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

    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" 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 for old browsers(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

    The 'store' is the tree vm

    Tree props

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

    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

    {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 events

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

    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 properties

    // 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 deep properties example

    node._vm // vm
    node._vm.level // 节点层级, 只读
    node._vm.store // tree
    node.parent._vm // parent node vm
    node._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

    clone the package, and

    npm install
    npm 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.

    Keywords

    none

    Install

    npm i vue-draggable-nested-tree

    DownloadsWeekly Downloads

    1,891

    Version

    3.0.0-beta2

    License

    MIT

    Unpacked Size

    404 kB

    Total Files

    8

    Last publish

    Collaborators

    • phphe