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 地址