# vue-dragula

> Vue wrapper for dragula

Latest version **1.3.1** (published 2017-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-dragula
pnpm add vue-dragula
yarn add vue-dragula
bun add vue-dragula
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2017-02-24 |
| First published | 2016-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 357 |
| Author | YichangLiu |
| Maintainers | liuyichang |

## Links

- npm: https://www.npmjs.com/package/vue-dragula
- Repository: https://github.com/Astray-git/vue-dragula
- Homepage: https://github.com/Astray-git/vue-dragula#readme
- Issues: https://github.com/Astray-git/vue-dragula/issues
- npm.io page: https://npm.io/package/vue-dragula

## Dependencies (1)

- [dragula](https://npm.io/package/dragula.md) 3.7.2

## Recent versions

- 1.3.1 (latest) — 2017-02-24
- 2.0.0-alpha.1 (next) — 2016-12-17
- 1.3.0 — 2016-10-15
- 1.2.0 — 2016-10-09
- 1.1.0 — 2016-08-03
- 1.0.5 — 2016-07-21
- 1.0.4 — 2016-06-28
- 1.0.3 — 2016-05-03
- 1.0.2 — 2016-05-03
- 1.0.1 — 2016-05-03
- 1.0.0 — 2016-05-03
- 0.0.3 — 2016-04-27
- 0.0.2 — 2016-04-26
- 0.0.1 — 2016-04-26

## README

# vue-dragula
> :ok_hand: Drag and drop so simple it hurts

Vue wrapper for [`dragula`][1].

## Install
#### CommonJS

- Available through npm as `vue-dragula`.
  ``` bash
  npm install vue-dragula
  ```

  ``` js
  var Vue = require('vue');
  var VueDragula = require('vue-dragula');

  Vue.use(VueDragula);
  ```

#### Direct include

- You can also directly include it with a `<script>` tag when you have Vue and dragula already included globally. It will automatically install itself.

## Usage

template:
``` html
<div class="wrapper">
  <div class="container" v-dragula="colOne" bag="first-bag">
    <!-- with click -->
    <div v-for="text in colOne" @click="onClick">{{text}} [click me]</div>
  </div>
  <div class="container" v-dragula="colTwo" bag="first-bag">
    <div v-for="text in colTwo">{{text}}</div>
  </div>
</div>
```

**NOTE** Vuejs 2.x 

To make sure a correct update for DOM element order, we must provide a `key` for `v-for` directive inside a dragula container. https://vuejs.org/v2/guide/list.html#key  
With `v-for="item in list"`, we need `:key="item.id"` for object items, `:key="item"` for plain string.



## APIs

You can access them from `Vue.vueDragula`

### `options(name, options)`

Set dragula options, refer to: https://github.com/bevacqua/dragula#optionscontainers
```js
...
new Vue({
  ...
  created: function () {
    Vue.vueDragula.options('my-bag', {
      direction: 'vertical'
    })
  }
})
```

### `find(name)`

Returns the `bag` for a `drake` instance. Contains the following properties:

- `name` the name that identifies the bag
- `drake` the raw `drake` instance

## Events
For drake events, refer to: https://github.com/bevacqua/dragula#drakeon-events


```js
...
new Vue({
  ready: function () {
    Vue.vueDragula.eventBus.$on('drop', function (args) {
      console.log('drop: ' + args[0])
    })
  }
})
```


## Special Events for vue-dragula

| Event Name |      Listener Arguments      |  Event Description |
| :-------------: |:-------------:| -----|
| dropModel | bagName, el, target, source, dropIndex | model was synced, dropIndex exposed |
| removeModel | bagName, el, container, removeIndex | model was synced, removeIndex exposed |

[1]: https://github.com/bevacqua/dragula

---
_Source: https://npm.io/package/vue-dragula · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._