<template>
    <div class="components-container">
      <aside>drag-list base on
        <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
      </aside>
      <div class="editor-container">
        <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
      </div>
    </div>
  </template>
  
  <script>
  import DndList from '@/components/DndList'
  import { fetchList } from '@/api/article'
  
  export default {
    name: 'DndListDemo',
    components: { DndList },
    data() {
      return {
        list1: [],
        list2: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.listLoading = true
        fetchList().then(response => {
          this.list1 = response.data.items.splice(0, 5)
          this.list2 = response.data.items
        })
      }
    }
  }
  </script>