Drag and Drop elements with Vue Draggable

Vue.Draggable

A Vue component for Vue.js 2.0 or a directive for Vue.js 1.0 project, allowing drag-and-drop and synchronization with view model arrays.

Based on and offering all features of Sortable.js

Example

<script>
import draggable from 'vuedraggable'

export default {
data () {
    return {
        list: [
        //array of objects
        ]
    }
},
components: {
    draggable
}
</script>

<template>
<div id="app>
    <div class="drag">
        <draggable :list="list.upvotes">
        <transition-group>
                <div v-for="element in list" :key="element.upvotes">
                        <h2>{{element.upvotes}}</h2>
                </div>
    </transition-group>
</draggable>
     </div>
</div>
</template>

To see more about props check the documentation.

Here you can see a Demo with draggable boxes.

The source code is available on GitHub/