# Kanban 拖拽组件

> 拖拽组件，通过鼠标拖拽可实现相关模块的位置和顺序的改变。

::: demo 组件 Kanban 使用示例

```vue
<template>
  <div class="components-container board">
    <DgKanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="主数据编码框" />
    <DgKanban :key="2" :list="list2" :group="group" class="kanban working" header-text="大中小分类" />
    <DgKanban :key="3" :list="list3" :group="group" class="kanban done" header-text="物料特性码" />
  </div>
</template>
<script>
export default {
  name: 'DragKanbanDemo',
  data() {
    return {
      group: 'mission',
      list1: [
        { name: 'Mission', id: 1 },
        { name: 'Mission', id: 2 },
        { name: 'Mission', id: 3 },
        { name: 'Mission', id: 4 },
      ],
      list2: [
        { name: 'ABC', id: 5 },
        { name: 'EFG', id: 6 },
        { name: 'ABC', id: 7 },
        { name: 'EFG', id: 8 },
        { name: 'ABC', id: 9 },
        { name: 'EFG', id: 10 },
      ],
      list3: [
        { name: 'HYZK', id: 11 },
        { name: 'LMN', id: 12 },
        { name: 'HYZK', id: 13 },
        { name: 'LMN', id: 14 },
      ],
    }
  },
}
</script>
<style lang="scss">
.board {
  width: 1000px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.kanban {
  &.todo {
    .board-column-header {
      background: #4a9ff9;
    }
  }
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
  &.done {
    .board-column-header {
      background: #2ac06d;
    }
  }
}
</style>
```

:::
`

## API

| 属性       | 说明     |   类型   | 默认值 |
| ---------- | -------- | :------: | :----: |
| headerText | 标题文本 | `String` | Header |
| options    | 选项     | `Object` |        |
| list       | 数据列表 | `Array`  |        |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.8（2019-09-19）

- [优化] 增删改查的封装

#### v1.0.9（2020-03-07）

- 完善文档