Cacher is the code snippet organizer for pro developers

<template>
  <div class="hello">
    <draggable :list="list" :options="{animation: 150}" >
       <div v-for="element in list" class="element">{{element.name}}</div>
    </draggable>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    name: 'hello',
    data() {
      return {
        list: [
        { name: 'Line 0' },
        { name: 'Line 1' },
        { name: 'Line 2' },
        { name: 'Line 3' },
        { name: 'Line 4' },
        ],
      };
    },
    components: {
      draggable,
    },
  };
</script>
<style type="text/css">
  .element {
    box-shadow: 1px 1px 1px 0px #e2e2e2;
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    padding: 10px;
    cursor: move;
    background: #35495e;
    color: #fff;
  }
</style>