SOURCE

console.log(Element(Vue))
new Vue({
    el: '#app',
    data() {
        return {
            componentList: [
                {
                    name: 'banner',
                    text: 'Banner'
                },
                {
                    name: 'rank-enter',
                    text: '排行榜'
                },
                {
                    name: 'contest-info',
                    text: '参赛详情'
                },
                {
                    name: 'contest-works',
                    text: '参赛作品'
                },
            ],
            list: [
                {
                    name: 'banner',
                    text: 'Banner'
                }
            ],
            currentName: null,
        }
    },
    methods: {
        handleAdd(e) {
            console.log(e.newIndex);
            this.currentName = this.list[e.newIndex].name
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
})

<div id="app">
    <div class="modules">
        <draggable v-model="componentList" element="ul" draggable=".item" :options="{group:{name: 'site',pull:'clone'},sort: false}"  animation="300">
            <transition-group>
                <li class="component-item item" v-for="(item, index) of componentList" :key="index">
                    <i class='el-icon-picture'></i>
                    <span>{{item.text}}</span>
                </li>
            </transition-group>
        </draggable> 
    </div>
    <div class="content">
        <div class="mobile">
            <draggable v-model="list" element="ul" :options="{group:{name: 'site', pull: false},sort: true}" animation="300" @add="handleAdd">
                <transition-group>
                    <li class="item" v-for="item of list" :key="item.name">{{item.name}}</li>
                </transition-group>
            </draggable> 
        </div>
    </div>
    <div class="config">
        <div v-if="currentName == 'banner'">
            <div>Banner 设置</div>
            <div>
                
            </div>
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#app {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: row;
    border: 1px solid #eee;
}

.modules {
    width: 20vw;
    height: 100vh;
    border-right: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}
.modules .component-item {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    margin-right: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content {
    width: 50vw;
    height: 100vh;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content .mobile {
    width: 375px;
    height: 667px;
    background: #fff;
    overflow-y: auto;
}

.config {
    width: 30vw;
    height: 100vh;
    border-left: 1px solid #eee;
}

.item {
    width: 375px;
    height: 150px;
    margin-bottom: 20px;
}


 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }