vue draggable + vuex

by bestiole

HTML

<script src="https://unpkg.com/sortablejs@1.7.0/Sortable.js"></script>
<script src="https://unpkg.com/vuedraggable@2.16.0/dist/vuedraggable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="main">
  <div v-for="(list, listName) in pages">
    <h3>List {{listName}}</h3>
     <draggable v-model="pages[listName]" :options="{group:{pull:true,put:true},animation: 150}" class="sortable-list">
       <div v-for="page in pages[listName]" :key="page.id" class="sortable">{{page.title}}</div>
    </draggable>
  </div>
</div>

SCSS

$item-height:2.5em;
$border-color:rgba(128,128,128,.5);
.sortable-list {
  background-color:$border-color;
  padding:.1px 0;
  display:block;
}
.sortable {
  height:$item-height;
  line-height:$item-height;
  margin:1px;
  padding-left:1em;
  background-color:white;
  cursor: move;
}
.sortable-ghost {
  height:$item-height;
  opacity:.2;
}

JavaScript

const store = new Vuex.Store({
	strict: true,
	state: {
		pages: {'menu' : [
        {'id' : 0, 'title' : 'home'},
        {'id' : 1, 'title' : 'about'},
        {'id' : 2, 'title' : 'contact'}
      ],
      'specials' : [
         {'id' : 3, 'title' : 'special'},
         {'id' : 4, 'title' : 'weirdo'},
      ]
    }
  }
})

new Vue({
	el: '#main',
  store,
  computed: {
  	pages: {
			get () {
				return this.$store.state.pages
			}
    }
  }
})