vue拖拽drag-demo

 

<template>
	<div>
		<div>
			<ol>
				<li>
					middleData:{{middleData}}
				</li>
				<li>
					fileMiddleData:{{fileMiddleData}}
				</li>
				<li>
					middleIndex:{{middleIndex}}
				</li>
				<li>
					fileMddleIndex:{{fileMddleIndex}}
				</li>
			</ol>
		</div>
		<div class="shine-transfer">

			<div class="shine-transfer">
				<!-- 此处写查询功能 ，在这里就不给大家写了 -->
				<div class="shine-list">
					<ul style="border-left: 1px solid #EBEEF5;">
						<li>左侧数据 - 可以自拖动排序or向右拖动</li>
						<li v-for="(field, index) in leftArr" :key="index" draggable="true"
							@dragstart="dragStart($event, index, field)" @dragover="allowDrop"
							@drop="drop($event, index,field)">{{field.fieldzn}}</li>
					</ul>
				</div>
			</div>

			<div class="shine-transfer" style="margin-left: 20px">
				<!-- 此处写查询功能 ，在这里就不给大家写了 -->
				<div class="shine-list" @dragover="allowDrop" @drop="fileDrop($event)">
					<ul class="shine-ul">
						<li>右侧数据 - 可以向左拖动</li>
						<li v-for="(ls,index) in rightArr" :key="index+'file'" draggable="true"
							@dragstart="fileDragStart($event, ls, index)">
							{{ls.fieldzn}}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "StaffManagement",
		components: {},
		computed: {

		},
		data() {
			return {
				rightLoading: false, //禁止自拖拽
				middleData: {},
				middleIndex: -1,
				fileMiddleData: {},
				fileMddleIndex: -1,
				annexFieldList: [

					{
						id: 1,
						aFieldzn: '二中文1'
					},
					{
						id: 2,
						aFieldzn: '二中文2'
					},
					{
						id: 3,
						aFieldzn: '二中文3'
					},
				],
				leftArr: [{
						fieldzn: ''
					},
					{
						fieldzn: ''
					},
					{
						fieldzn: ''
					},
				],

				rightArr: [{
						id: 11,
						fieldzn: '二中文11'
					},
					{
						id: 12,
						fieldzn: '二中文12'
					},
					{
						id: 13,
						fieldzn: '二中文13'
					},

				],
			}
		},
		created() {
			// new Array(30).fill(1).forEach(() => {
			//   this.personsInfo.push({name:'666',isBind: false});
			// })
		},
		methods: {
			// 另一个表的拖动
			dragStart(e, index, field) {
				this.rightLoading = false
				// this.clearBakData() // 清空上一次拖动时保存的数据
				e.dataTransfer.setData('Text', index);
				console.log('field', field);
				this.fileMiddleData = field // 设置此次拖动时保存的数据
				this.fileMddleIndex = index //设置此次拖动时保存的数据Index
				console.log('this.fileMiddleData', this.fileMiddleData);
				console.log('this.fileMddleIndex', this.fileMddleIndex);
			},
			// 当前表的拖动
			fileDragStart(e, index, i) {
				this.rightLoading = true
				this.clearBakData() // 清空上一次拖动时保存的数据
				e.dataTransfer.setData('Text', index);
				this.middleData = index
				this.middleIndex = i
				console.log('this.fileMiddleData', this.middleData);
				console.log('this.fileMddleIndex', this.middleIndex);
			},
			drop(e, index, field) {
				// 取消默认行为
				this.allowDrop(e);
				console.log('this.middleData', this.middleData);
				// 判断拖起的元素是映射表中的数据，还是当前备选表中的数据
				if (JSON.stringify(this.middleData) !== '{}') {
					//  此处是映射表中的数据

					console.log('index', index);
					// 放置到当前的数组中
					console.log('this.middleData', this.middleData);
					this.leftArr.splice(index, 1, JSON.parse(JSON.stringify(this.middleData)))
					// 清除当前拖动的在另一个表中的数据
					if (this.middleIndex !== -1) {
						this.rightArr.splice(this.middleIndex, 1)
					}
					// ... 此次写你们的逻辑
				} else {
					console.log('自拖动');
					// 拖动的元素在当前张表时，交换两个数据的位置
					// this.clearBakData()
					//使用一个新数组重新排序后赋给原变量
					let arr = this.leftArr.concat([])
					let temp = arr[index];
					arr[index] = arr[this.fileMddleIndex];
					arr[this.fileMddleIndex] = temp;
					console.log('arr', arr);
					this.leftArr = arr;
				}
				this.clearBakData()
			},
			// 从映射表中放到 备选表中
			fileDrop(e) {
				if (this.rightLoading) return
				//取消默认行为
				this.allowDrop(e);
				console.log('this.fileMiddleData', this.fileMiddleData);
				this.rightArr.push(this.fileMiddleData)
				console.log('this.leftArr', this.leftArr);
				console.log('this.fileMiddleData1', this.fileMiddleData);
				let obj = {}
				Object.keys(this.fileMiddleData).map(item => {
					obj[item] = ''
				})
				this.leftArr.splice(this.fileMddleIndex, 1, JSON.parse(JSON.stringify(obj)))
				this.clearBakData()
				console.log('this.leftArr1', this.leftArr);
			},
			allowDrop(e) {
				e.preventDefault()
			},
			clearBakData() {
				// 此处写清除各列表的操作
				this.middleData = {}
				this.middleIndex = -1
				this.fileMiddleData = {}
				this.fileMddleIndex = -1
			},


		}
	}
</script>

<style scoped>
	.shine-transfer {
		display: flex;
		justify-content: flex-start;
	}

	.shine-list {
		display: flex;
		justify-content: flex-start;
		border: 1px solid #000;

		li {
			border: 1px solid red;
			width: 300px;
			margin-bottom: 10px;
			height: 30px;
		}
	}
</style>