Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Astray-git/vue-dragula
:ok_hand: Drag and drop so simple it hurts http://astray-git.github.io/vue-dragula
https://github.com/Astray-git/vue-dragula
Last synced: 3 months ago
JSON representation
:ok_hand: Drag and drop so simple it hurts http://astray-git.github.io/vue-dragula
- Host: GitHub
- URL: https://github.com/Astray-git/vue-dragula
- Owner: Astray-git
- License: mit
- Created: 2016-04-26T07:19:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-03-24T10:56:30.000Z (almost 4 years ago)
- Last Synced: 2024-10-01T12:34:31.428Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 411 KB
- Stars: 364
- Watchers: 9
- Forks: 69
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-dragula
- awesome-vue - vue-dragula - git/vue-dragula?style=social) - 使拖放变得简单 (UI组件)
- awesome-github-vue - vue-dragula - 使拖放变得简单 (UI组件)
- awesome-github-vue - vue-dragula - 使拖放变得简单 (UI组件)
- awesome - vue-dragula - 使拖放变得简单 (UI组件)
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 `` 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