<template>
  <div class="dg-kanban board-column">
    <div class="board-column-header">
      {{ headerText }}
    </div>
    <draggable :list="list" v-bind="$attrs" class="board-column-content" :set-data="setData">
      <div v-for="element in list" :key="element.id" class="board-item">{{ element.name }} {{ element.id }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// 拖拽组件
export default {
  name: 'DgKanban',
  components: {
    draggable,
  },
  props: {
    headerText: {
      type: String,
      default: 'Header',
    },
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    },
  },
}
</script>
