效果展示

Demo演示.gif

vue.draggable 安装 && 使用

//依赖下载
npm i -S vuedraggable 
或
 yarn add vuedraggable

//导入draggable组件
 import draggable from 'vuedraggable' 

 //注册draggable组件 
components: { draggable },

<!--使用draggable组件 v-model绑定数组-->
 <draggable v-model="myArray"  @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

• vue.draggable 相关属性

  
  
  vue.draggable 相关属性.png

• 事件

  
  
  事件.png

Demo完整代码

<template>
    <div class="page-edit">
        <!-- 左侧业务组件区 -->
        <div class="left-components">
            <div class="title-bar">业务组件</div>
            <draggable
                v-model="componentsList"
                draggable=".li"
                v-bind="dragOptions"
                :options="{ sort: false, group: { name: 'field', pull: 'clone', put: false } }"
            >
                <div v-for="d in componentsList" :key="d.type" class="li">{{ d.name }}</div>
                <a-button class="save" @click="save">保存配置</a-button>
            </draggable>
        </div>

        <!-- 右侧内容生成区 -->
        <div class="right-content">
            <div class="title-bar">页面内容区</div>
            <draggable class="content" group="field" v-bind="dragOptions" :list="contentList" @change="toChange">
                <div v-for="(item, index) in contentList" :key="'r' + index">
                    <div class="item">
                        {{ item.name }}
                        <div class="delbtn" @click="del(index)">✖</div>
                    </div>
                </div>
            </draggable>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    name: "PageEdit",
    components: {
        draggable
    },

    data() {
        return {
            dragOptions: {
                animation: 500,
                filter: ".disabled" //class为disabled时不可拖拽
            },
            componentsList: [
                { type: "top", name: "信息条组件" },
                { type: "income", name: "收益指标" },
                { type: "electricity", name: "电量指标" },
                { type: "comprehensive", name: "系统效率" },
                { type: "warning", name: "告警指标" }
            ],
            contentList: [{ type: "top", name: "信息条组件" }]
        };
    },
    watch: {},
    created() {
        if (JSON.parse(localStorage.getItem("contentList"))) {
            this.contentList = JSON.parse(localStorage.getItem("contentList"));
        }
    },
    methods: {
        toChange(e) {
            console.log(e);
            if (e.added) {
                console.log(this.contentList);
            }
        },
        del(idx) {
            this.contentList.splice(idx, 1);
        },
        save() {
            localStorage.setItem("contentList", JSON.stringify(this.contentList));
            this.$message.success("保存成功");
        }
    }
};
</script>

<style lang="scss">
.page {
    &-edit {
        padding: 16px;
        display: flex;
        overflow: hidden;
        .title-bar {
            padding: 12px;
            font-size: 18px;
            font-weight: bold;
            background: #091d48;
            margin-bottom: 16px;
        }
        .left-components {
            width: 15%;
            height: calc(100vh - 100px);
            border: solid 1px #4d617f;
            overflow: auto;
            .li {
                background: #4d617f;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 10px 10px;
                padding: 12px 0;
            }
            .save {
                position: absolute;
                top: 25px;
                right: 30px;
                z-index: 999;
            }
        }
        .right-content {
            width: 85%;
            height: calc(100vh - 100px);
            border: solid 1px #4d617f;
                overflow: hidden;
        }
        .content {
            width: 100%;
            height: calc(100vh - 100px);
            overflow-y: auto;
            .item {
                height: 80px;
                background: #4d617f;
                margin: 0 12px 12px 12px;
                padding: 12px;
                position: relative;
            }
        }
        .delbtn {
            position: absolute;
            right: 4px;
            top: 0px;
            font-size: 12px;
            line-height: 24px;
            cursor: pointer;
        }
    }
}
</style>