Vue-Draggable多列表之间的拖拽和排序

发表于 | 分类于 ， | 阅读次数:

简单介绍

Vue-Draggable是一个基于Sortable.js的vue组件，用以实现拖拽功能

使用步骤

1. Install Vue-Draggable (安装)

1
npm i -S vuedraggable

2. 组件内使用代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div class="drag-list-wrapper">
    <div class="list-one">
      <div class="list-title">列表1事项</div>
        <Draggable v-model="listOne" group="list" @end="handleChange($event)">
          <span v-for="(item, index) in listOne" :key="index">{{ item }}</span>
        </Draggable>
      </div>
    </div>
    <div class="list-two">
      <div class="list-title">列表2事项</div>
        <Draggable v-model="listTwo" group="list" @end="handleChange($event)">
          <span v-for="(item, index) in listTwo" :key="index">{{ item }}</span>
        </Draggable>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listOne: ['ECMAScript6','VueJS','ReactJS','AngularJS','Webpack','NodeJS','TypeScript'],
      listTwo: []
    }
  },
  methods: {
    handleChange (event, type) {
      console.log(event, type)
    }
  }
}
</script>

注意：列表间能够相互拖拽的关键属性是group，因此必须配置相同的 group值

3. 效果展示

-------------本文结束感谢您的阅读-------------