vue-dragula
👌 Drag and drop so simple it hurts
Vue wrapper for dragula
.
Install
CommonJS
-
Available through npm as
vue-dragula
.npm install vue-dragulavar Vue = ;var VueDragula = ;Vue;
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:
<!-- with click -->{{text}} [click me]{{text}}
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
... ... { VuevueDragulaoptions'my-bag' direction: 'vertical' }
find(name)
Returns the bag
for a drake
instance. Contains the following properties:
name
the name that identifies the bagdrake
the rawdrake
instance
Events
For drake events, refer to: https://github.com/bevacqua/dragula#drakeon-events
... { VuevueDragulaeventBus }
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 |