需求：实现两栏，自定义组件拖拽，上下左右均可
看官方文档，是没有上下左右的例子，只有两栏左右拖拽的，但是每一栏只能上下，而不能左右
其实这里用了display：flex的属性，flex-wrap:wrap 如果宽度超出 那么就自动的往下布局来实现的

demo如下

<div class="container">
		<div class="left">
			<draggable v-model="list" group="site">
				<transition-group class="left-drag">
					<div v-for="item in list" :key="item.key" class="item" :style="{ width: item.style.width + 'px' }">
						{{ item.name }}
					</div>
				</transition-group>
			</draggable>
		</div>
		<div class="right">
			<draggable v-model="list1" group="site">
				<transition-group class="right-drag">
					<div v-for="(item, index) in list1" :key="index">
						<div class="item" :style="{ width: item.style.width + 'px' }">
							{{ item.name }}
						</div>
					</div>
				</transition-group>
			</draggable>
		</div>
	</div>

<script>
import draggable from 'vuedraggable';

export default {
	components: {
		draggable
	},
	data() {
		return {
			list: [
				{ key: 1, name: '组件一', style: { width: 760, height: 60 } },
				{ key: 2, name: '组件二', style: { width: 760, height: 60 } },
				{ key: 3, name: '组件三', style: { width: 760, height: 60 } }
			],
			list1: [
				{ key: 1, name: '组件四', style: { width: 370, height: 60 } },
				{ key: 2, name: '组件五', style: { width: 370, height: 60 } },
				{ key: 3, name: '组件六', style: { width: 370, height: 60 } }
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	.left {
		background-color: #fff;
		width: 800px;
		height: 1000px;
		margin: 0 20px;
		padding: 20px;
		.left-drag {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			min-height: 80px;
		}
	}
	.right {
		background-color: #fff;
		height: 1000px;
		width: 410px;
		padding: 20px;
		.right-drag {
			width: 410px;
			min-height: 80px;
			display: block;
		}
	}
	.item {
		height: 80px;
		border: 1px solid #e9e9e9;
		text-align: center;
		line-height: 80px;
	}
}
</style>

效果图

初始

移动后