npm install --save @chifi49/vue-draggable
or
<script src="vue-draggable.umd.min.js"></script>
<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>
defaults: span
accepts any valid html tag e.x <vuedraggable tag='li'></vuedraggable>
except 'br','script','noscript','dfn','object'
default: 100
the css z-index to set to dragging elemnt
default: 'xy' - possible values xy, x, y
in which axis to drag
ex. set axis='y' if you want only vertical dragging
default: false
while dragging the dragging element can be a clone of the original 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;
}
}
default: 0.5
default: 20
how many pixels to move from the original position before dragging starts
the opacity of the dragging element
default: '' (empty)
accepts a css selector which will serve as the handle for dragging and not the original element
default: []
the areas where the dragging element can be dropped
accepts an array with css selectors
default: body
the area that the dragging element is allowed to be dragged
default: false
if the dragging element can be sorted within its parent
default: []
custom classes that you want to pass and append in draggable in class attribute
default: {}
an object with any data that you wish to pass and receive in back from callbacks with property name "customData"
called when the dragging starts (called only once)
called when the dragging stops
called continuously while the dragging takes place
called when the draggable enters a droppable area (called only once)
called while the dragable is being dragged inside the droppable area
called when the draggable element is dropped
called when the draggable is clicked