Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vivify-ideas/vue-draggable
Vue Drag and Drop library without any dependency 👌
https://github.com/vivify-ideas/vue-draggable
drag-and-drop javascript vue
Last synced: 1 day ago
JSON representation
Vue Drag and Drop library without any dependency 👌
- Host: GitHub
- URL: https://github.com/vivify-ideas/vue-draggable
- Owner: Vivify-Ideas
- License: mit
- Created: 2017-02-04T22:13:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:06:57.000Z (about 2 years ago)
- Last Synced: 2024-04-14T20:44:36.296Z (10 months ago)
- Topics: drag-and-drop, javascript, vue
- Language: JavaScript
- Homepage: https://vivify-ideas.github.io/vue-draggable/
- Size: 2.17 MB
- Stars: 309
- Watchers: 8
- Forks: 37
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
#
[](https://www.npmjs.com/package/vue-draggable)
[](https://vuejs.org/)
[](https://github.com/Vivify-Ideas/vue-draggable/issues?q=is%3Aopen+is%3Aissue)
[](https://www.npmjs.com/package/vue-draggable)
[](https://github.com/Vivify-Ideas/vue-draggable/blob/master/LICENSE)## Description
Vue Drag and Drop library without any dependency.
Native HTML5 drag and drop implementation made for Vue.
[Examples 🎪](https://vivify-ideas.github.io/vue-draggable/example/)
## Installation
```
npm install vue-draggableyarn add vue-draggable
```## Setup
### Setup plugin
```javascript
import Vue from 'vue'
import VueDraggable from 'vue-draggable'Vue.use(VueDraggable)
```### Setup directive locally
```javascript
import { VueDraggableDirective } from 'vue-draggable'export default {
directives: {
dragAndDrop: VueDraggableDirective
}
}```
## Usage
In the template, use the `v-drag-and-drop` directive:
### HTML
```html
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
```### Options
#### Directive `v-drag-and-drop` available options
```javascript
{
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)
```html
- 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](https://vivify-ideas.github.io/vue-draggable/example/#working-with-reactive-data)#### 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`.```html
```#### Event Params for `onDrop`, `onDragstart`, `onDragenter`, `onDragover`, `onDragend` callbacks
```javascript
{
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:
```javascript
import 'vue-draggable/polyfills'
```## Contributors 🎖
[
](https://github.com/nikolasp) |[
](https://github.com/tiagocsilva) |[
](https://github.com/piboistudios) |[
](https://github.com/swaroopjo) |[
](https://github.com/figurluk) |
:---:|:---:|:---:|:---:|:---:|
[nikolasp](https://github.com/nikolasp)|[tiagocsilva](https://github.com/tiagocsilva)|[piboistudios](https://github.com/piboistudios)|[swaroopjo](https://github.com/swaroopjo)|[figurluk](https://github.com/figurluk)|---
LICENCE MIT - Created by Nikola Spalevic ([email protected])