vue中拖拽插件之vue-slicksort的使用,踩坑

门户项目中需要进入后台操作门户界面的排版,考虑到使用的方便,于是采用了拖拽插件------vue-slicksort

//  首先npm插件
$ npm install vue-slicksort --save       
//  引入组件
import { SlickList, SlickItem } from 'vue-slicksort'
//  注册组件
components: {
        SlickList,
        SlickItem
},

详细代码如下

<template>
    <div class="edit-plate">
        <SlickList :lockToContainerEdges="true" axis="y" lockAxis="y" v-model="items" class="SortableList"
            @input="getChangeList">
            <div>
                <el-button type="text" @click="handClick(items)" class="el-icon-plus plate-add"
                    style="background-color: #fff;text-align: center;width: 100%;display: inline-block;line-height: 40px;">
                    点击添加</el-button>
            </div>
            <SlickItem v-for="(item, index) in items" class="SortableItem" :index="index" :key="index">
                <h1
                    style="padding: 0;margin: 0;border-bottom: 1px dashed #cccccc;font-size: 18px;padding: 10px;text-align: center;cursor: pointer;background-color: #99999917;">
                    <span>{{ item.name }}</span>
                    <el-button type="text" class="el-icon-edit-outline" @click="handClick(item)" title="编辑"></el-button>
                    <el-button type="text" class="el-icon-delete" @click="handClick(item)" title="删除"></el-button>
                </h1>
                <div class="root">
                    <SlickList :lockToContainerEdges="true" class="list" axis="x" lockAxis="x" v-model="item.itemArr"
                        style="border-bottom:1px solid #eee;display:flex" @input="getChangeLists">
                        <SlickItem class="list-item" v-for="(item, index) in item.itemArr" :index="index" :key="index"
                            style="line-height: 42px;padding: 40px 20px;background-color: #ffffff;border-right:1px solid #eee;text-align:center;box-sizing: border-box;user-select: none;flex-wrap: nowrap;flex: 1;cursor: pointer">
                            <span>{{ item.name }}</span>
                            <el-button type="text" class="el-icon-edit-outline" @click="handClick(item)" title="编辑">
                            </el-button>
                            <el-button type="text" class="el-icon-delete" @click="handClick(item)" title="删除">
                            </el-button>
                        </SlickItem>
                        <span>
                            <el-button type="text" @click="handClick(item.itemArr)" class="el-icon-plus plate-add"
                                style="background-color: #fff;text-align: center;width: 80px;display: inline-block;line-height: 120px;">
                            </el-button>
                        </span>
                    </SlickList>
                </div>
            </SlickItem>
        </SlickList>
    </div>
</template>
<script>
import { SlickList, SlickItem } from 'vue-slicksort'
export default {
    data () {
        return {
            form: {},
            open: false,
            flag: true,
            items: [
                {
                    name: '实验室漫游',
                    itemArr: [{ name: '实验室漫游' }, { name: '全景航拍' }]
                },
                {
                    name: '虚拟仿真教学系统',
                    itemArr: [{ name: '虚拟仿真教学系统' }]
                },
                {
                    name: '公告通知',
                    itemArr: [{ name: '新闻' }, { name: '通知' }]
                },
                {
                    name: '实验教学资源',
                    itemArr: [{ name: '实验视频' }, { name: '实验文档' }, { name: '实验软件' }]
                }
            ]
        }
    },
    components: {
        SlickList,
        SlickItem
    },
    methods: {
        getChangeList (e) {
            window.console.log(e, 'val')
        },
        getChangeLists (e) {
            window.console.log(e, 'vals')
        },
        handClick (e) {
            this.open = !this.open
            this.form = {}
            window.console.log(e, 'vals')
        }
    }
}
</script>
<style lang="less">
.edit-plate {
    .el-button--text {
        padding: 0;
    }
}
</style>
<style lang="scss" scoped>
.edit-plate {
    .list-item {
        float: left;
    }
    .root {
        overflow: hidden;
    }
    .SortableItem {
        box-sizing: border-box;
        visibility: none !important;
        background: #fff;
        &:last-child {
            border: none;
        }
        .root {
            background-color: #f3f3f3;
        }
    }
    .SortableList {
        width: 100%;
        background-color: #f3f3f3;
        border: 1px solid #cccccc;
    }
}
</style>

因为每一次拖拽,dom都是重新渲染,写css没用,只能写成行内样式.此代码是模拟数据的静态文件,可以直接粘贴.效果图如下