Vue

by kabanoki

HTML

<script src="https://unpkg.com/vue-slicksort@latest/dist/vue-slicksort.min.js"></script>
<div id="app">
  <slick-list lockAxis="y" v-model="items" class="box">
    <slick-item v-for="(item, index) in items" :index="index" :key="index" class="item">
        {{item.title}}
    </slick-item>
  </slick-list>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

ul, .box { 
list-style-type: none;
} 
li, .item { 
cursor: pointer; 
padding: 10px;
border: solid #ddd 1px;
background-color: #fff;
}

Vue

var items = [];

for(let n=0; n<10; n++)
{
  items.push({
    no:n,
    title:'title-'+n
  })
}

const SlickList = window.VueSlicksort.SlickList;
const SlickItem = window.VueSlicksort.SlickItem;

console.log(SlickList, SlickItem);

let app = new Vue({
  el: '#app',
  data: {
    items: items
  },
  components: {
    'slick-list':SlickList,
    'slick-item':SlickItem
  },
});