A Simple Drag-and-drop Hierarchical List For A Vue Component

vue-nestable Drag and drop a hierarchical list of vuejs components to create a draggable list of customizable items Reorder items by dragging them over another item.

Objectives

  • A simple Vue component to create a draggable list of customizable items.
  • Rearrange items by dragging them over another item.
  • Intuitively nest elements by swiping to the right.
  • Fully customizable, and shipped without CSS.
  • Everything is configurable: item ID, maximum interference level, and interference threshold.

How to make use of it:

Installation

npm install --save vue-nestable

1. Use the plugin in your app:

import Vue from 'vue'
import VueNestable from 'vue-nestable'

Vue.use(VueNestable)

2. You can also import components on demand if you wish to do so:

import { VueNestable, VueNestableHandle } from 'vue-nestable'

export default {
  components: {
    VueNestable,
    VueNestableHandle
  }
  ...
}

Draggable Hierarchical List, vue-nestable Plugin/Github, drag and drop hierarchy, vue draggable nested tree, vuetify draggable list, vue draggable styling


See Demo And Download

Official Website(rhwilr): Click Here

This superior jQuery/javascript plugin is developed by rhwilr. For extra Advanced Usage, please go to the official website.

Share