低代码开发之vue.draggable的使用（初阶：组件化拖拽生成简单页面）

效果展示

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 相关属性
  

• 事件
  

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>

更多详见draggable官网=>https://www.itxst.com/vue-draggable/tutorial.html