vue2 使用 Sortable 库进行拖拽操作

最新推荐文章于 2025-06-24 06:14:30 发布
最新推荐文章于 2025-06-24 06:14:30 发布
阅读量2.6k 收藏 11
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 前端知识 # 前端框架 (vue+ layui 等) 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41463655/article/details/127777356

一、vue 项目使用

文档地址： https://www.itxst.com/sortablejs/neuinffi.html

1、安装依赖

npm i -S vuedraggable

2、.vue 文件引入组件

import draggable from "vuedraggable";
components: { draggable },

在这里插入图片描述

3、.使用

查看文档中的示例即可：https://debug.itxst.com/js/ivv3eivm

我们使用的 npm 安装，不需要其他东西，只需要下方标注的主要代码部分，其中的css为演示展示用，无实际用处

在这里插入图片描述

二、进阶案例演示代码（UMD版）

1、采用技术

  • vue2
  • element-ui2
  • avue ： 基于vue2 + element-ui2 二次封装组件库
  • Sortable ： 拖拽
  • vuedraggable ： vue二次封装的拖拽，基于Sortable

2、展示图

在这里插入图片描述

3、源码

原为npm 版， 抽取成 UMD 版便于大家学习参考

1、本地新建 .html文件
2、复制下方代码到 .html
3、打开htm 即得到上方 展示效果中 相同效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"/>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<!-- 引入相关JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>

<!-- 图片拖拽排序 -->
<script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
<!-- 已经加载过了 -->
<!--<script src="https://www.itxst.com/package/vue/vue.min.js"></script>-->
<!--<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>-->
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>


<div id="app">
    {{ message }}

    <div class="bt-article-all">
        <el-row>
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>文章信息区</span>
                        <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
                    </div>
                    <avue-form ref="form" v-model="obj" :option="option"
                               @reset-change="emptytChange"
                               @submit="submit">
                        <template slot-scope="{row}" slot="content">
                            <TinymceEditor v-if="initSuccess" :content.sync="obj.content"/>
                        </template>
                    </avue-form>
                </el-card>
            </el-col>
        </el-row>


        <el-row>

            <!-- 左侧区 -->
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>内容编辑区</span>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>-->
                    </div>
                    <div>
                        <!--  group="itxst" -->
                        <draggable v-model="contentItems" chosen-class="chosen" force-fallback="true" group="itxst" :disabled="disabledDrag" animation="1000" @start="onStart" @end="onEnd">
                            <transition-group>
                                <div id="contentBox" class="bt-card-box" v-for="(item,index) in contentItems" :key="index" style="padding-top: 2%">
                                    <el-card class="box-card bt-card-box">
                                        <div slot="header" class="clearfix singlePerson">
                                            <span>{{index+1}} :   </span>
                                            <span>{{item.lableName}}  </span>
                                            <el-button style="float: right; padding: 3px 0" type="text" @click="delItemRow(item)">删除</el-button>
                                        </div>
                                        <div v-if="item.lable == 'H1' || item.lable == 'H2' || item.lable == 'H3'">
                                            <el-input type="input" placeholder="请输入内容" v-model="item.value"></el-input>
                                        </div>
                                        <div v-if="item.lable == 'P' ">
                                            富文本组件
                                            <!-- 富文本组件 当前单页无法加载 -->
                                            <!--  <TinymceEditor v-if="drag==false" :content.sync="item.value"/>-->
                                        </div>
                                        <div v-if="item.lable == 'IMAGE'">
                                            <el-image style="width: 80px; height: 80px" :src="item.value" fit="cover"></el-image>
                                        </div>
                                        <div v-if="item.lable == 'VIDEO'">
                                            <el-input type="input" placeholder="请输入内容" v-model="item.value"></el-input>
                                            <!--  <el-image style="width: 80px; height: 80px" :src="item.value" fit="cover"></el-image>-->
                                        </div>
                                        <div v-if="item.lable == 'ARRAY'">
                                            <!-- <avue-form :option="{column: [{label:'数组框',prop:'array', type:'array', value:[0,1]}]}"></avue-form>-->
                                            <avue-array v-model="item.value" :option="{dataType:'string'}" placeholder="请输入内容"></avue-array>
                                        </div>
                                    </el-card>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </el-card>
            </el-col>

            <!-- 右侧区 -->
            <el-col :span="12">
                <!-- 媒体区 -->
                <div class="bt-card-box">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>媒体资源区</span>
                        </div>
                        <div>
                            <el-row>
                                <draggable v-model="imageItems" chosen-class="chosen" force-fallback="true" :options="{group:{name: 'itxst',pull:'clone'}, sort: true}" animation="1000" @start="onStartImages" @end="onEndImages">
                                    <transition-group>
                                        <el-col :span="4" v-for="(item,index) in imageItems" :key="index">
                                            <div style="padding: 5%">
                                                <el-card class="box-card">
                                                    <el-image
                                                            style="width: 80px; height: 80px"
                                                            :src="item.value"
                                                            fit="cover"></el-image>
                                                    <span style="text-align: center;display:block;">{{ item.alt }}</span>
                                                </el-card>
                                            </div>
                                        </el-col>
                                    </transition-group>
                                </draggable>
                            </el-row>
                        </div>
                    </el-card>
                </div>

                <!-- 内容预览区 -->
                <div class="bt-card-box" style="padding-top: 2%">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>内容预览区</span>
                        </div>
                        <div v-for="(item,index) in contentItems" :key="index">
                            <h1 v-if="item.lable == 'H1'">{{item.value}}</h1>
                            <h2 v-if="item.lable == 'H2'">{{item.value}}</h2>
                            <h3 v-if="item.lable == 'H3'">{{item.value}}</h3>
                            <span v-if="item.lable == 'P'" v-html="item.value"></span>
                            <span v-if="item.lable == 'IMAGE'">
                                <img style="width: 50%" :src="item.value" alt="item.alt">
                            </span>
                            <div v-if="item.lable == 'VIDEO'">
                                <video width="50%" controls :autoplay="false">
                                    <source :src="item.value" type="video/mp4">
                                </video>
                            </div>
                            <div v-if="item.lable == 'ARRAY'">
                                <li v-for="(item,index) in item.value">{{index+1}}、{{item}}</li>
                            </div>
                        </div>
                    </el-card>
                </div>

            </el-col>
        </el-row>
        {{contentItems}}
        <div>{{drag?'拖拽中':'拖拽停止'}}</div>

    </div>
</div>

<body>
<script>
    //import draggable from "vuedraggable";

    var vm = new Vue({
        // 绑定 id="app" 的元素
        el: "#app",
        // components: {
        //     draggable
        // },
        // 定义数据
        data: {
            message: "这是一个拖拽示例demo",
            obj: {},
            initSuccess: false,
            defaultData: {
                name: null,
                alias: null,
                author: "测试",
                categoryIds: null,
                coverUrl: "http://xijia-sz.oss-cn-shenzhen.aliyuncs.com/oss/file/file/gc/08769453-1(6).jpeg",
                lables: null,
                content: null,
                state: 1,
                describe: "-",
                auth: 1,
                sort: 0,
                seoTitle: null,
                seoKeyword: null,
                seoDescription: null,

            },
            categoryTree: [],
            disabledDrag: false, //默认开启拖拽
            drag: false,
            dragImages: false,
            contentItems: [
                {lable: 'H1', lableName: "一级标题", value: ''},
                {lable: 'H2', lableName: "二级标题", value: ''},
                {lable: 'H3', lableName: "三级标题", value: ''},
                {lable: 'P', lableName: "段落", value: ''},
                {lable: 'IMAGE', lableName: "图片", value: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
                {lable: 'VIDEO', lableName: "视频", value: 'http://127.0.0.1:10006/upload/video/swagger-ui.html/20221109-0315-11、恭喜你发现宝藏！！！.mp4'},
                {lable: 'ARRAY', lableName: "有序列表", value: [0, 1]},

            ],
            // "lable": "H1", "name": "一级标题", "sort": 1, "value": "-"
            imageItems: [
                //fits: ['fill', 'contain', 'cover', 'none', 'fill'],
                //fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                {lable: "IMAGE", lableName: "图片", alt: "a1", value: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"},
                {lable: "IMAGE", lableName: "图片", alt: "a2", value: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"},
                {lable: "IMAGE", lableName: "图片", alt: "a3", value: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"},
                {lable: "IMAGE", lableName: "图片", alt: "a4", value: "http://xijia-sz.oss-cn-shenzhen.aliyuncs.com/oss/file/file/gc/08769453-1(6).jpeg"},
                {lable: "IMAGE", lableName: "图片", alt: "a5", value: "http://xijia-sz.oss-cn-shenzhen.aliyuncs.com/oss/file/file/gc/08769453-1(6).jpeg"},
                {lable: "IMAGE", lableName: "图片", alt: "a6", value: "http://xijia-sz.oss-cn-shenzhen.aliyuncs.com/oss/file/file/gc/08769453-1(6).jpeg"},
            ],
        },
        props: {
            closeDialog: [],
            uri: {},
        },
        computed: {
            option() {
                return {
                    submitBtn: false,
                    emptyBtn: false,
                    submitText: '提交',
                    emptyText: "关闭",
                    group: [
                        {
                            // icon: 'el-icon-info',
                            label: '展开/收缩文章信息',
                            collapse: false,
                            prop: 'group1',
                            column: [

                                {
                                    label: '文章名',
                                    prop: 'name',
                                    maxlength: 64,
                                    showWordLimit: true,
                                    span: 10,
                                    rules: [{
                                        required: true,
                                        message: "请输入 文章名",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: '别名',
                                    prop: 'alias',
                                    maxlength: 64,
                                    showWordLimit: true,
                                    span: 10,
                                    rules: [{
                                        required: true,
                                        message: "请输入 别名",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: '作者',
                                    prop: 'author',
                                    maxlength: 32,
                                    showWordLimit: true,
                                    span: 10,
                                    rules: [{
                                        required: true,
                                        message: "请输入 作者",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: '分类',
                                    prop: 'categoryIds',
                                    span: 10,
                                    type: "cascader",
                                    dataType: 'string',
                                    filterable: true,
                                    dicData: this.categoryTree,   // 自行替换字典数据
                                    props: {
                                        value: "id",
                                        label: "name",
                                        children: "categorys"
                                    },
                                    rules: [{
                                        required: true,
                                        message: "请选择 分类ids ",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: '封面图',
                                    prop: 'coverUrl',
                                    span: 10,
                                    rules: [{
                                        required: true,
                                        message: "请上传 文章封面图url ",
                                        trigger: "blur"
                                    }],
                                    dataType: 'string',
                                    accept: 'image/png, image/jpeg, image/jpg, image/gif',
                                    type: 'upload',
                                    listType: 'picture-img',
                                    action: '128.0.0.1/update/image/cover/',   // 上传地址 + 文件保存上传地址(详见接口描叙)
                                    multiple: true,          // 文件多选
                                    drag: true,              // 拖拽排序
                                    limit: 1,                // 上传数量 1 个
                                    //fileSize: 500,         // 上传大小 500 kb内
                                    tip: '只能上传 jpg/png/gif 格式的图片',
                                    loadText: '上传中...',
                                    propsHttp: {
                                        res: 'data'
                                    },
                                    uploadBefore: (file, done) => {
                                        // 文件上传前处理
                                        done(file)
                                    },
                                    uploadAfter: (res, done) => {
                                        this.$message.success('上传成功');
                                        done()
                                    },
                                    uploadError(error, column) {
                                        // 上传失败
                                        this.$message.error(error);
                                    },
                                    uploadExceed(limit, files, fileList, column) {
                                        // 文件数量验证
                                        this.$message.warning(`当前限制文件数量为 $1, 当前共 ${files.length + fileList.length} `);
                                    },
                                },
                                // {
                                //     label: '标签',
                                //     prop: 'lables',
                                //     type: 'array',
                                //     dataType: 'string',
                                //     limit: 10,
                                //     span: 10,
                                //     rules: [{
                                //         required: false,
                                //         message: "请添加 标签集",
                                //         trigger: "blur"
                                //     }]
                                // },
                                {
                                    label: '文章描述',
                                    prop: 'describe',
                                    type: 'textarea',
                                    maxlength: 256,
                                    showWordLimit: true,
                                    span: 10,
                                    rules: [{
                                        required: true,
                                        message: "请输入 文章描述",
                                        trigger: "blur"
                                    }]
                                },
                                // {
                                //     label: '文章内容 ',
                                //     prop: 'content',
                                //     maxlength: 0,
                                //     showWordLimit: true,
                                //     span: 10,
                                //     rules: [{
                                //         required: true,
                                //         message: "请输入 文章内容 ",
                                //         trigger: "blur"
                                //     }]
                                // },
                                // {
                                //     label: '状态 ',
                                //     prop: 'state',
                                //     type: 'radio',
                                //     //dicData: this.dict.get('ARTICLE_STATE'),
                                //     span: 10,
                                //     rules: [{
                                //         required: true,
                                //         message: "请选择 状态 ",
                                //         trigger: "blur"
                                //     }]
                                // },
                                // {
                                //     label: '访问权限 ',
                                //     prop: 'auth',
                                //     type: 'radio',
                                //     //dicData: this.dict.get('ARTICLE_AUTH'),
                                //     span: 10,
                                //     rules: [{
                                //         required: true,
                                //         message: "请选择 访问权限 ",
                                //         trigger: "blur"
                                //     }]
                                // },
                                // {
                                //     label: '排序',
                                //     prop: 'sort',
                                //     maxlength: 11,
                                //     showWordLimit: true,
                                //     span: 10,
                                //     rules: [{
                                //         required: true,
                                //         message: "请输入 排序",
                                //         trigger: "blur"
                                //     }]
                                // },
                                {
                                    label: 'seo: Title',
                                    prop: 'seoTitle',
                                    maxlength: 128,
                                    showWordLimit: true,
                                    span: 20,
                                    labelWidth: 130,
                                    rules: [{
                                        required: false,
                                        message: "请输入 seo优化字段 Title",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: 'seo: Keyword',
                                    prop: 'seoKeyword',
                                    maxlength: 256,
                                    showWordLimit: true,
                                    span: 20,
                                    labelWidth: 130,
                                    rules: [{
                                        required: false,
                                        message: "请输入 seo优化字段 Keyword",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: 'seo: Description',
                                    prop: 'seoDescription',
                                    maxlength: 256,
                                    showWordLimit: true,
                                    span: 20,
                                    labelWidth: 130,
                                    rules: [{
                                        required: false,
                                        message: "请输入 seo优化字段 Description",
                                        trigger: "blur"
                                    }]
                                }]
                        }],

                }
            }
        },
        created() {
            this.obj = this.defaultData;
            //this.findCategorTree();
            this.initSuccess = true;


        },
        // 实例被挂载后调用
        mounted: function () {
            console.log("mounted=实例已被挂载")
            // 输入内容时禁止拖拽
            var inputs = document.getElementsByClassName('el-input__inner');
            for (let item of inputs) {
                item.addEventListener('blur', event => {
                    console.log("inputting!!111");
                    this.disabledDrag = false;
                });
                item.addEventListener('focus', event => {
                    console.log("inputting!!222");
                    this.disabledDrag = true;
                });
            }

        },
        methods: {
            emptytChange() {
                this.closeDialog(false);
            }
            ,
            submit(form, done) {
                this.crud.post(this.uri.info, this.obj).then((res) => {
                    console.debug(res);
                    if (res.data.code == 200) {
                        this.closeDialog(true);
                    }
                    done(form);
                }).catch((err) => {
                    console.error(err);
                    done(form);
                })
            }
            ,
            /**
             * 查询分类数据
             */
            async findCategorTree() {
                let res = await this.crud.get(this.uri.findCategoryTree);
                this.categoryTree = res.data.data;
            }
            ,

            /**
             * 删除行数据
             * @param element
             */
            delItemRow(item) {
                if (this.contentItems.length <= 1) {
                    this.$message.error('最后一条数据不能删除');
                    return
                }
                this.contentItems.splice(this.contentItems.indexOf(item), 1)
            }
            ,

            // 内容区拖动
            onStart() {
                this.drag = true;
            }
            ,
            onEnd() {
                // this.resetImageSort();
                this.drag = false;
            }
            ,
            // 图片区拖动
            onStartImages() {
                this.dragImages = true;
            }
            ,
            onEndImages() {
                this.dragImages = false;
            }
            ,
        }
    });
    // app.use(AVUE);

</script>


<style scoped>
    /* 主宽度 */
    .bt-article-all {
        width: 96%;
        padding-left: 2%;
    }

    /* 卡片上间距 */
    .bt-card-box {
        padding-left: 1%;
    }

    /* 卡片默认样式 */
    .text {
        font-size: 14px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        /*padding: 1%;*/
        padding-top: 1%;
    }
</style>


</body>
</html>
Vue2自定义拖拽指令-元素拖拽
东小小川
06-03 847
Vue2 自定义拖拽指令-元素拖拽-参数传递-细节把控
基于 Vue2 实现元素拖拽的全局指令，快速赋予任意元素可拖拽能力
柯晓楠
06-07 2584
定义插件，以插件的形式实现全局拖拽指令的封装，被定义拖拽指令的任意元素都可以快速赋予可拖拽能力
Vue2通过选择顺序排序后的表格，实现拖拽效果
最新发布
2403_87844293的博客
06-24 272
【代码】Vue2通过选择顺序排序后的表格，实现拖拽效果。
传入el-table的数据结构
ZQH084811的博客
09-19 967
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
vue2拖拽功能组件 vue.draggable拖拽插件 多功能拖拽
weixin_56718509的博客
10-16 2417
vue2拖拽 vue.draggable拖拽插件 多功能拖拽，单列拖动、定位拖拽、拖拽分组、延时拖拽、过渡动画、拖住时候的样式、禁用拖动、只能拖进。最后附带源码纯前端demo复制粘贴即可使用。表格拖动请看官网（我这里没做所以没写）
Vue2 _ 实现拖拽功能
热门推荐
Mr.小灰狼_随笔
12-29 1万+
Vue.Draggable 是一款基于 Sortable.js 实现的 Vue 拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、Vue 2过渡动画兼容、支持撤销操作。
在 Vue 2 中实现可拖拽排序指令：v-sortable
xiang_yang_QAQ的博客
05-14 2141
v-sortable首先，我们需要创建一个自定义指令v-sortable，它使元素可拖动并处理拖放事件。});});});});接下来，在你的 Vue 组件中使用这个自定义指令，并处理handleDrop方法以更新数据的位置。
vue2中使用element对话框组件实现拖拽
JS279的博客
12-04 1946
在上面的代码中，我们通过自定义指令实现了对话框的拖拽功能。下面我们将进行全局封装方便使用：新建directives文件夹里面创建draggable.js和index.jsdirectives文件夹主要存放全局的自定义指令draggable.js是我们封装的拖拽功能index.js为/统一注册指令，方便管理1.创建draggable.js// 拖拽指令bind(el) {// 获取弹窗头部元素// 获取整个弹窗元素// 设置鼠标样式为移动// 监听鼠标按下事件。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 1317
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
Vue中使用Sortable的示例代码
08-27
在Vue中使用Sortable的示例代码，主要介绍了如何在Vue项目中使用Sortable库来实现拖拽排序的功能。Sortable库是一个开源的JavaScript库，提供了拖拽排序的功能，可以与Vue结合使用来实现复杂的拖拽排序功能。 ...
vue2.0使用Sortable.js实现的拖拽功能示例
10-20
在Vue 2.0中，实现拖拽功能可以借助第三方库Sortable.js，它是一个轻量级、高性能且无依赖的JavaScript拖放库。本示例将详细介绍如何在Vue项目中结合Sortable.js和vuedraggable.js来实现拖拽功能。 首先，你需要...
在vue中使用sortable.js拖拽插件
weixin_44157893的博客
05-08 1938
安装sortable.js npm install sortablejs --save 在需要使用的vue文件中导入 import Sortable from 'sortablejs' 在mounted生命周期中初始化 var el = document.getElementById('itxst'); //设置配置 var ops = { animation: 100, //拖动结
vue2拖拽功能
cunning_of_fox的博客
08-16 230
vue拖拽功能
【vue2多列拖拽组件】vue.draggable嵌套拖拽使用
Fantasywt的博客
09-08 3595
/一个网页存在多个分组时设置//是否允许列内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽// 按下鼠标后多久可以拖拽 1000表示1秒delay: 0,//如果为false按下鼠标不动才计算延时，移动则无效//当按下鼠标移动了n个像素时会取消延迟delay事件，即可超过了这个范围无法拖动元素了//启用禁用拖拽//Store//动画效果// Easing 动画 默认null. See https://easings.net/ for examples.
VUE2拖拽组件:vue-draggable-resizable-gorkys
liuyuan_java的专栏
07-05 1339
vue-draggable-resizable-gorkys组件基于vue-draggable-resizable进行二次开发,grid为一个数组，第一个值为每次拖拽组件时，X轴横向移动的距离，第一个值为每次拖拽组件时，Y轴纵向移动的距离。isConflictCheck表示是否可以让组件重叠，true表示不可以重叠，false表示可以重叠。此方法为拖动时调用，但是只有在snap属性为true时调用。此方法为当组件状态太取消激活时调用方法。此方法为当组件状态激活时调用方法。
vue2 实现组件拖拽
靈的博客
06-15 947
通过自定义指令实现拖拽组件
Vue2 - 详细实现列表拖曳排序功能，列表或表格自定义元素拖动排序效果，用鼠标按住拖动列表进行手动排序并颠倒排序顺序时有动画，用户鼠标或手势拖动列表改变排序顺序（支持滚动条内嵌套列表，贴边会自动下移
资深程序员
07-09 3362
vue2，nuxt2，列表，拖曳排序，拖动排序，拖拽排序，顺序排列，拖拽组件，拖拽排序插件，列表拖曳排序，在滚动条内排序无法贴边上下移动，表格行数据如何拖动排序，表格拖动改变顺序，vue拖拽排序，拖曳元素，拖拽任意组件并改变数据排序，改变数据的顺序如何做，vuedraggable，数组上下移动并更改排序值，上移下移排序,列表排序，Vue2中的列表拖拽排序，vue2拖拽组件Vue.Draggable，手机移动端，pc网页，网站，h5，手机H5公众号网页，移动端触屏拖动，手机触摸拖动无效，列表排序了但是数据没有
【vue2拖拽】使用sortablejs实现拖拽效果
????鱼干～
06-15 2113
【vue2拖拽】使用sortablejs实现拖拽效果
vue2中，使用sortablejs组件和vuedraggable实现拖拽排序功能
weixin_44867717的博客
12-03 6044
拖拽
vue2使用sortable.js实现el-table拖动行并且序号保持不变
04-28
### Vue2 中使用 Sortable.js 实现 Element UI 的 el-table 组件拖动行功能并保持序号不变 为了在 Vue2 项目中通过 `Sortable.js` 实现 `el-table` 行拖拽排序的功能，同时确保表格中的序号不会因拖拽而改变，可以按照以下方式实现。 #### 主要思路 1. 使用 `Sortable.js` 提供的 API 来监听拖拽事件。 2. 在数据模型层面更新数组顺序以同步视图变化。 3. 添加一个独立字段用于存储原始索引值，在渲染时利用该字段来显示固定的序号[^1]。 以下是具体实现： ```javascript <template> <div> <el-table :data="tableData" border style="width: 100%"> <!-- 定义一列表格序号 --> <el-table-column type="index" label="#" width="50"></el-table-column> <el-table-column prop="name" label="名称" width="180"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <!-- 可选：添加一个隐藏 DOM 节点作为 Sortable 初始化目标 --> <tr ref="dragHandle" class="hidden-drag-handle"> <td></td><td></td><td></td> </tr> </div> </template> <script> import Sortable from 'sortablejs'; export default { data() { return { tableData: [ { name: '张三', age: 24 }, { name: '李四', age: 30 }, { name: '王五', age: 27 } ] }; }, mounted() { this.initSortable(); }, methods: { initSortable() { const elTableBody = this.$refs.dragHandle || document.querySelector('.el-table__body-wrapper tbody'); new Sortable(elTableBody, { animation: 150, handle: '.handle', // 如果有自定义手柄类名，则在此指定 onEnd: (evt) => { const oldIndex = evt.oldIndex; const newIndex = evt.newIndex; // 更新数据源顺序 const movedItem = this.tableData.splice(oldIndex, 1)[0]; this.tableData.splice(newIndex, 0, movedItem); } }); } } }; </script> <style scoped> .hidden-drag-handle { display: none; /* 隐藏辅助节点 */ } .handle { cursor: move; /* 自定义手柄样式 */ } </style> ``` #### 关键点解析 - **初始化 Sortable** 将 `Sortable.create()` 方法绑定到 `.el-table__body-wrapper tbody` 上，这是实际承载表格主体的部分。如果需要更精确的选择器，可以通过 `$refs` 或者动态查询获取对应的 DOM 元素。 - **onEnd 回调函数** 当用户完成拖拽操作后触发此回调。通过调整原生 JavaScript 数组的方法（如 `splice`），重新排列内部的数据结构，从而让前端展示的内容与逻辑一致[^1]。 - **固定序号处理** 利用 `<el-table-column>` 的内置属性 `type="index"` 自动生成基于当前页面分页后的连续编号；或者手动维护额外的一个字段记录初始位置，并将其映射至界面层面上呈现给用户的视觉效果。 --- ####
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值