vue-draggable-yubo v1.0.4

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'-movefor animation.

Suggested to read Vue Docs for transition-group.

<draggable 
	v-model="myArray"
	tag="div"
	transition-name="list"
	>

.list-move {
  transition: transform 0.15s;
}