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

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

Draggable webcodeflow · October 27, 2022 · 0 Comment

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.

A Lightweight Library For Handling Hierarchical Folder Tree Component Content For Vue

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