vue.js 实现form、ul、列表元素的拖拽

vue.js 实现form、ul、列表元素的拖拽排序

1:引入 vuedraggable 插件

npm install vuedraggable --save

2:组件中引入 vuedraggable

<script>
import Draggable from 'vuedraggable'
export default {
  components: {
    Draggable
  },
  }

3:组件中使用 Draggable

// 其中 dataList 为数据源，handleSortChange为排序后的回调方法，会将排序后的数据返回 
// exgLeftBar 为元素点击时触发的方法
<ul class="type-list">
   <draggable :list="dataList" ghost-class="ghost" @sort="handleSortChange">
    <li  v-for="(item,index) of dataList"  :key="index">
      <span @click="exgLeftBar(item)">{{item.name}}</span>
    </li>
   </draggable>
</ul>

4:拖拽后保存排序的思路

在回调方法 handleSortChange 中会将排序后的数据返回，可以直接将其传递给后台接口，让其根据当前的数据顺序进行排序值得设置

最后附上 vuedraggable 的 npm 地址