vue-draggable

by Vivify-Ideas

Vivify-Ideas / vue-draggable

Vue Drag and Drop library without any dependency 👌

229 Stars 34 Forks Last release: Not found MIT License 83 Commits 16 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

npm version vue2 GitHub open issues npm download MIT License

Description

Vue Drag and Drop library without any dependency.

Native HTML5 drag and drop implementation made for Vue.

Examples 🎪

Installation

npm install vue-draggable

yarn add vue-draggable

Setup

Setup plugin

import Vue from 'vue'
import VueDraggable from 'vue-draggable'

Vue.use(VueDraggable)

Setup directive locally

import { VueDraggableDirective } from 'vue-draggable'

export default { directives: { dragAndDrop: VueDraggableDirective } }

Usage

In the template, use the

v-drag-and-drop
directive:

HTML

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Options

Directive
v-drag-and-drop
available options

{
  dropzoneSelector: 'ul',
  draggableSelector: 'li',
  handlerSelector: null,
  reactivityEnabled: true,
  multipleDropzonesItemsDraggingEnabled: true,
  showDropzoneAreas: true,
  onDrop: function(event) {},
  onDragstart: function(event) {},
  onDragenter: function(event) {},
  onDragover: function(event) {},
  onDragend: function(event) {}
}

Dropzone events (added, removed, reordered)

  • Item 1
  • Item 2
  • Item 3

These three custom events have additional

ids
and
index
params. Ids is an array of defined
data-id
attributes and
index
represents drop intersection. For more info check out example

Reactivity handling and renderless component

There is available

VueDraggableGroup
component so you don't need to write your own model manipulation logic. However, usage of this component is optional. Use only with Vue v2.6+. You can pass to component optional
itemsKey
prop if you want to change items collection property name. By default it's
items
.

Event Params for
onDrop
,
onDragstart
,
onDragenter
,
onDragover
,
onDragend
callbacks

{
  nativeEvent: {}, // native js event
  items: [], // list of selected draggable elements
  owner: null, // old dropzone element
  droptarget: null // new dropzone element,
  stop: () => {} // Stop D&D (available only for callbacks `onDragstart` and `onDragend`)
}

TypeScript

Included TypeScript definitions.

Browser Compatibility

Polyfills for IE9+ support are included in the repo.

If you need to support IE9 in your applications, import the polyfills:

import 'vue-draggable/polyfills'

Contributors 🎖

nikolasp

tiagocsilva piboistudios swaroopjo figurluk
nikolasp tiagocsilva piboistudios swaroopjo figurluk

LICENCE MIT - Created by Nikola Spalevic ([email protected])

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.