August 9, 2022

A Draggable Sortable Vue.js Tree Component | he-tree-vue

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

he-tree-vue

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


See Demo And Download

Official Website(phphe): Click Here

This superior jQuery/javascript plugin is developed by phphe. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.