需求描述

最近在做一个后台系统。一个功能性的产品需求是页面分为左右两部分。左侧页面视图通过右侧组件列表动态配置，组件组装的左侧视图可以上下拖动改变顺序或删除。

根据这个需求，我做了以下演示。

功能分解

可以通过拖动将右侧组件列表克隆到左侧。拖动后，右侧组件列表的数量不会减少。左侧组件可以展开或折叠。可以上下拖动、删除，但不能向右拖动。在拖动过程中，左侧组件不会改变其展开和折叠状态。演示截图

代码地址

vue-可拖动列表

代码预览

模板div class=' row ' div class=' col-5 ' H3组件配置页面演示/h3可拖动标记=' El-collapse ' class=' drag area list-group ' : list=' list 2 ' group=' comp ' @ change=' log ' El-collapse class=' list-group-item left ' v-for=' list 2 ' : key=' index ' v-model=' active name ' @ change=' handleChange ' El-collapse-item : name='导出默认{name:' clone '，display:' clone '，order: 2，components: { draggable }，data(){ return { list 1:[{ name 3360 ' components 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 3360[]，count : { 0 }；}，methods : { log : function(evt){ console . log(evt)；if(evt . add){ this . count=1；const item=evt . add . element；const idx=this . list 2 . FindIndex(e=e . id===item . id)；让temp=JSON . parse(JSON . stringify(this . list 2))；temp[idx]。id=this.countthis.list2=temp} }，handleChange:函数(){}，deleteItem:函数(index) { this.list2.splice(index，1)；} }};/脚本摘要

以上是边肖介绍的实现动态页面配置功能的Vue拖拽组件列表，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！