A Draggable Sortable Vue.js Tree Component

he-tree-vue is a draggable, sortable vuejs tree component, with a dragged placeholder, and defining types. Supports Vue3. Under the MIT license.

Features

Including functions about folding and checkbox. You can easily customize the user interface and contact them.
Edge scroll. Auto-scroll when you drag a node to the edge of the element using the scroll bar.
Supports RTL.
Pull through the trees. (Pro plugin required)
Clone upon checkout. (Pro plugin required)

draggable & droppable

Nodes are drag and drop by default. You can set the drag-and-drop properties of the node. Another way is to listen for the ‘drag‘ event and pass all the data to set the drag or drop property.

traverse the tree

I recommend using my other library tree helper. It has two traversal methods: deepFirstSearch, breadthFirstSearch.

draggable library

Draggable-helper Another drag library. It is also used by this component.

How to make use of it:

Install

npm i vue-draggable-nested-tree

Usage

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: [
  {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'},
  ]},
]

draggable nested tree component for vue js, he-tree-vue Plugin/Github, vue draggable nested example, vue draggable example, vue sortable tree, vue3 draggable tree, vue draggable columns