@chifi49/vue-draggable
Version:
drag, drop and sort any element in vuejs
159 lines (131 loc) • 3.44 kB
Markdown
# Installation
`npm install --save @chifi49/vue-draggable`
or
`<script src="vue-draggable.umd.min.js"></script>`
# Usage
```
<template>
<ul class="vue-droppable">
<vuedraggable tag="li" :dropto="dropto" axis="y" :sortable="true">
Item 1
</vuedraggable>
<vuedraggable tag="li" :dropto="dropto" axis="y" :sortable="true">
Item 2
</vuedraggable>
<vuedraggable tag="li" :dropto="dropto" axis="y" :sortable="true">
Item 3
</vuedraggable>
</ul>
<ul class="vue-droppable">
</ul>
</template>
<script>
import vuedraggable from 'chifi49@/vue-draggable'
export default{
components:{
vuedraggable
},
data(){
return {
dropto:['vue-droppable']
}
}
}
</script>
```
or
```
<html>
<body>
<div id="app">
<vuedraggable tag="div">
<p>Drag me</p>
</vuedraggable>
</div>
<script src="vue-draggable.umd.js"></script>
<script>
new Vue({
el:'#app',
components:{
'vuedraggable':window['vue-draggable']
},
data:function(){
return {
dropto:['vue-droppable']
}
}
})
</script>
</body>
</html>
```
# Props
#### tag
defaults: span
accepts any valid html tag e.x `<vuedraggable tag='li'></vuedraggable>`
except 'br','script','noscript','dfn','object'
#### zindex
default: 100
the css z-index to set to dragging elemnt
#### axis
default: 'xy' - possible values xy, x, y
in which axis to drag
ex. set axis='y' if you want only vertical dragging
#### clone
default: false
while dragging the dragging element can be a clone of the original element
#### clone_element
default: null
accepts a function that returns a dom element
while moving the dragging element, this element can be any dom element that you return from the function
e.x.
```
<vuedraggable :clone_element="clone_element"></vuedraggable>
methods:{
clone_element:function(params){
var div = document.createElement('div');
div.style.cssText = 'height:20px;background-color:#000;color:#fff;width:100px';
return div;
}
}
```
#### clone_opacity
default: 0.5
#### offset
default: 20
how many pixels to move from the original position before dragging starts
the opacity of the dragging element
#### draghandle
default: '' (empty)
accepts a css selector which will serve as the handle for dragging and not the original element
#### dropareas
default: []
the areas where the dragging element can be dropped
accepts an array with css selectors
#### containment
default: body
the area that the dragging element is allowed to be dragged
#### sortable
default: false
if the dragging element can be sorted within its parent
#### classes
default: []
custom classes that you want to pass and append in draggable in class attribute
#### custom_data
default: {}
an object with any data that you wish to pass and receive in back from callbacks with property name "customData"
# Callbacks
#### drag_started
called when the dragging starts (called only once)
#### drag_ended
called when the dragging stops
#### dragging
called continuously while the dragging takes place
#### drop_enter
called when the draggable enters a droppable area (called only once)
#### dropping
called while the dragable is being dragged inside the droppable area
#### dropped
called when the draggable element is dropped
#### clicked
called when the draggable is clicked