需求描述
最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除。
根据这个需求我做了下面这个demo。
功能分解
demo截图
代码地址
vue-draggable-list
代码预览
<template> <div class="row"> <div class="col-5"> <h3>组件配置页面展示</h3> <draggable tag="el-collapse" class="dragArea list-group" :list="list2" group="comp" @change="log" > <el-collapse class="list-group-item left" v-for="(element,index) in list2" :key="index" v-model="activeNames" @change="handleChange" > <el-collapse-item :name="element.id"> <template slot="title"> <span>{{element.name}}</span> <i class="el-icon-circle-close" @click.stop="deleteItem(index)"></i> </template> <div>{{ element.content }}</div> </el-collapse-item> </el-collapse> </draggable> </div> <div class="col-5"> <h3>可用组件列表</h3> <draggable class="dragArea list-group" :list="list1" :group="{ name: 'comp', pull: 'clone', put: false }" @change="log" > <div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div> </draggable> </div> </div> </template> <script> import draggable from "vuedraggable"; export default { name: "clone", display: "Clone", order: 2, components: { draggable }, data() { return { list1: [ { name: "组件1", id: 1, content: "内容内容内容。。。。" }, { name: "组件2", id: 2, content: "内容内容内容。。。。" }, { name: "组件3", id: 3, content: "内容内容内容。。。。" }, { name: "组件4", id: 4, content: "内容内容内容。。。。" }, { name: "组件5", id: 5, content: "内容内容内容。。。。" }, { name: "组件6", id: 6, content: "内容内容内容。。。。" }, { name: "组件7", id: 7, content: "内容内容内容。。。。" } ], list2: [], activeNames: [], count: 0 }; }, methods: { log: function(evt) { console.log(evt); if (evt.added) { this.count += 1; const item = evt.added.element; const idx = this.list2.findIndex(e => e.id === item.id); let temp = JSON.parse(JSON.stringify(this.list2)); temp[idx].id = this.count; this.list2 = temp; } }, handleChange: function() {}, deleteItem: function(index) { this.list2.splice(index, 1); } } }; </script>
总结
以上所述是小编给大家介绍的Vue拖拽组件列表实现动态页面配置功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文向大家介绍Vue组件Draggable实现拖拽功能,包括了Vue组件Draggable实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。 具体说明,请参考:学习链接 npm官方演示: vuedraggable特性: 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和
本文向大家介绍vue实现列表拖拽排序的功能,包括了vue实现列表拖拽排序的功能的使用技巧和注意事项,需要的朋友参考一下 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果;这里提供一种简单的实现方案。 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正
本文向大家介绍基于Vue实现拖拽功能,包括了基于Vue实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: JS代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js实现拖拽功能,包括了js实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 效果图:(红色方块可任意拖动) 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍vue实现拖拽效果,包括了vue实现拖拽效果的使用技巧和注意事项,需要的朋友参考一下 vue中实现拖拽效果,供大家参考,具体内容如下 首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3(事件对象中记录的鼠标位置) 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览
本文向大家介绍JavaScript 实现拖拽效果组件功能(兼容移动端),包括了JavaScript 实现拖拽效果组件功能(兼容移动端)的使用技巧和注意事项,需要的朋友参考一下 页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验。日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧。 预期目标 实现一个 Class 类,