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: 5 days 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 (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:06:57.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T20:44:36.296Z (7 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

        
# 


[![npm version](https://img.shields.io/npm/v/vue-draggable.svg?maxAge=2592000&v=2.0.6)](https://www.npmjs.com/package/vue-draggable)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![GitHub open issues](https://img.shields.io/github/issues/Vivify-Ideas/vue-draggable.svg?maxAge=2592000&v=2.0.6)](https://github.com/Vivify-Ideas/vue-draggable/issues?q=is%3Aopen+is%3Aissue)

[![npm download](https://img.shields.io/npm/dt/vue-draggable.svg?maxAge=2592000&v=2.0.6)](https://www.npmjs.com/package/vue-draggable)

[![MIT License](https://img.shields.io/github/license/Vivify-Ideas/vue-draggable.svg)](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-draggable

yarn 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])