<template>
	<div class="all-box">
		<transition-group name="drag" tag="div">
				<div class="item" v-for="(item, i) in list" :key="item.id" draggable="true"
					@dragstart="dragstart($event, i)" @dragenter="dragenter($event, i)" @dragend="dragend"
					@dragover="dragover">
					{{ item.name }}
				</div>
		</transition-group>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2';
	import toLead from '@/components/toLead';
	import Rule from '@/components/Rule';
	import {
		_debounce
	} from '@/api/auth';
	export default {
		data() {
			return {
				list: [{
						name: 'a',
						id: 1
					},
					{
						name: 'b',
						id: 2
					},
					{
						name: 'c',
						id: 3
					},
					{
						name: 'd',
						id: 4
					},
					{
						name: 'e',
						id: 5
					},
				],
				dragIndex: 0
			};
		},
		methods: {
			dragstart(e, index) {
				e.stopPropagation()
				this.dragIndex = index
				setTimeout(() => {
					e.target.classList.add('moveing')
				}, 0)
			},
			dragenter(e, index) {
				e.preventDefault()
				// 拖拽到原位置时不触发
				if (this.dragIndex !== index) {
					const source = this.list[this.dragIndex];
					this.list.splice(this.dragIndex, 1);
					this.list.splice(index, 0, source);

					// 更新节点位置
					this.dragIndex = index
				}
			},
			dragover(e) {
				e.preventDefault()
				e.dataTransfer.dropEffect = 'move'
			},
			dragend(e) {
				e.target.classList.remove('moveing')
			},
		}
	};
</script>

<style scoped lang="scss">
	.drag-move {
		transition: transform .2s;
	}

	.item {
		width: 200px;
		height: 40px;
		line-height: 40px;
		// background-color: #f5f6f8;
		background-color: skyblue;
		text-align: center;
		margin: 10px;
		color: #fff;
		font-size: 18px;
	}

	.container {
		position: relative;
		padding: 0;
	}

	.moveing {
		opacity: 0;
	}
</style>