vue-draggable-yubo
v1.0.4
Published
Vue3 component for drag & drop html element
Downloads
9
Readme
Vue3 component for drag & drop html element
Demo
https://yubo0826.github.io/vue-draggable/
Installation
npm i vue-draggable-yubo
Use
<draggable tag="div" v-model="playerList" v-slot="{ element }">
<div class="draggable" :style="{'background': element.color}">
{{ element.name }}, {{ element.number }}
</div>
</draggable>
import draggable from 'vue-draggable-yubo'
...
export default {
components: {
draggable,
},
data() {
return {
playerList: [{name: 'J.Lee', number: 35}, {name: 'H.Chi', number: 27}]
}
},
...
Props
modelValue
type: Array
required: true
Input an array to render a list of draggable elements.
<draggable v-model="myArray">
tag
type: String
default: div
required: false
The type of root node in HTML.
<draggable v-model="myArray" tag="tr">
handle
type: String
required: false
Input the class name. Dragging can only be achieved by dragging elements with this class.
<draggable v-model="myArray" handle="handle" tag="tr" v-slot="{ element }">
<div class="item">
<i class="fa fa-align-justify handle"></i>
{{ element.name }}
</div>
</draggable>
transition-name
type: String
required: false
In order to make animation during dragging element. The animation is based on Vue transition-group component, so this attribute refers to props. It is worth nothing that you have to set a transition css 'your name'-move
for animation.
Suggested to read Vue Docs for transition-group.
<draggable
v-model="myArray"
tag="div"
transition-name="list"
>
.list-move {
transition: transform 0.15s;
}