vuedraggable多列表拖拽【官网demo】

实现vue-draggable多列表拖拽

第一步：
npm安装 : npm install vuedraggable --save
第二部：
在页面按需引入：import draggable from ‘vuedraggable’
第三步：
废话少说，上代码，
全部代码 ，可直接复制到页面上，

<template>
	<div>
		<!--使用draggable组件-->
		<div class="itxst">
			<div class="col">
				<div class="title">国内网站</div>
				<draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass"
					chosenClass="chosenClass" @start="onStart" @end="onEnd">
					<transition-group>
						<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
					</transition-group>
				</draggable>
			</div>
			<div class="col">
				<div class="title">你可以把左边的元素拖到右边</div>
				<draggable v-model="arr2" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass"
					chosenClass="chosenClass" @start="onStart" @end="onEnd">
					<transition-group>
						<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
					</transition-group>
				</draggable>
			</div>
		</div>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	export default {
		components: {
			draggable
		},
		data() {
			return {
				drag: false,
				arr1: [{
						id: 1,
						name: 'www.itxst.com'
					},
					{
						id: 2,
						name: 'www.jd.com'
					},
					{
						id: 3,
						name: 'www.baidu.com'
					},
					{
						id: 4,
						name: 'www.taobao.com'
					}
				],
				arr2: [{
						id: 1,
						name: 'www.google.com'
					},
					{
						id: 2,
						name: 'www.msn.com'
					},
					{
						id: 3,
						name: 'www.ebay.com'
					},
					{
						id: 4,
						name: 'www.yahoo.com'
					}
				]
			}
		},
		mounted() {

		},
		methods: {
			onStart() {
				this.drag = true;
			},
			onEnd() {
				this.drag = false;
			},



		}
	}
</script>

<style lang="scss" scoped>
	/*定义要拖拽元素的样式*/
	.ghostClass {
		background-color: blue !important;
	}

	.chosenClass {
		background-color: red !important;
		opacity: 1 !important;
	}

	.dragClass {
		background-color: blueviolet !important;
		opacity: 1 !important;
		box-shadow: none !important;
		outline: none !important;
		background-image: none !important;
	}

	.itxst {
		margin: 10px;
	}

	.title {
		padding: 6px 12px;
	}

	.col {
		width: 40%;
		flex: 1;
		padding: 10px;
		border: solid 1px #eee;
		border-radius: 5px;
		float: left;
	}

	.col+.col {
		margin-left: 10px;
	}

	.item {
		padding: 6px 12px;
		margin: 0px 10px 0px 10px;
		border: solid 1px #eee;
		background-color: #f1f1f1;
	}

	.item:hover {
		background-color: #fdfdfd;
		cursor: move;
	}

	.item+.item {
		border-top: none;
		margin-top: 6px;
	}
</style>