使用VueDraggablePlus实现列表内拖拽排序。

• 实用干货

  对于前端页面，某个业务实体，需要实现在列表中拖拽排序，本文是介绍使用VueDraggablePlus实现列表内拖拽排序。

1.安装

npm install vue-draggable-plus

2.引入

import { VueDraggable } from 'vue-draggable-plus'

3.在项目中使用

 <VueDraggable v-model="state.tableData" target=".sort-target" @end="handleUpdata" animation="150">    <div class="table">        <table id="table1">            <thead>                <tr>                    <th>排列顺序</th>                    <th>推荐模块</th>                    <th>课程名称</th>                    <th>课程平台</th>                    <th>课程标签</th>                    <th style="width: 190px;">操作</th>                </tr>            </thead>            <tbody class="sort-target">                <tr v-for="item in state.tableData" :key="item.name" class="cursor-move">                    <td>{{ item.sort }}</td>                    <td>{{ item.course_group_name }}</td>                    <td>{{ item.course_name }}</td>                    <td>{{ item.platform }}</td>                    <td>                        <el-select v-model="item.tag" @change="tagChange($event, item.id)"                            placeholder="请选择">                            <el-option v-for="item in state.tagOptions" :key="item.id" :label="item.name"                                :value="item.id" />                        </el-select>                    </td>                    <td><el-link type="danger" @click="handleDelete(item.id)">删除</el-link></td>                </tr>            </tbody>        </table>    </div>​</VueDraggable>

4.此处为vue3使用方法

<script setup lang='ts'>import { VueDraggable } from 'vue-draggable-plus'import { SortableEvent } from "sortablejs"// 此处为调用接口实现拖拽排序const handleUpdata = (event: SortableEvent) => {    let ids = [] as any    state.tableData.forEach((item: any) => {        ids.push(item.id)    });    let data = {        course_group_id: state.queryParams.course_group_id,        platform: state.queryParams.platform,        ids: ids    }    moveRecommend(data).then((res: any) => {        if (res.code == 1) {            ElMessage({                showClose: true,                message: '保存成功',                type: 'success',            })            getList()        }    });}</script>

5.此处为表格css样式

<style scoped>table {    width: 100%;    border-collapse: collapse;    text-align: center;    font-size: 14px;}table th,td {    border: 1px solid #ebeef5;    padding: 8px 0;​}.table :deep(.el-table thead) {    color: #666;    font-weight: 400;    font-size: 13px;}table thead th {    background-color: #f3f3f3;    padding: 8px 0;    color: #222;    font-size: 13px;}</style>

时间