纯html和js穿梭框

1、效果： 

 

2、代码（复制可直接使用，对你有帮助的话就点个赞叭，嘿嘿）： 

<template>
	<div>
		<div class="container">
			<div class="left_box">
				<div @click="inviteAllPerson"
					style="color:red;cursor: pointer">{{inviteAll==true?'取消全选':'全选'}}</div>
				<div class="left_box_list"
					v-for="(item,index) in invitePersonList"
					:key="index">
					<div>{{item.name}}</div>
					<div>{{item.tel}}</div>
					<div @click="changeInviteStatus(item,index)"
						style="color:blue;cursor: pointer">点我选择</div>
				</div>
			</div>
			<div>>>></div>
			<div class="right_box">
				<div @click="deleteAllSelectedPerson"
					v-if="selectedInvitedPerson.length>0"
					style="color:red;cursor: pointer">全部清除</div>
				<div class="left_box_list"
					v-for="(item,index) in selectedInvitedPerson"
					:key="index">
					<div>{{item.name}}</div>
					<div>{{item.tel}}</div>
					<div @click="deleteSelectedPerson(item,index)"
						style="color:blue;cursor: pointer">点我删除</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
export default {
	data () {
		return {
			inviteAll: false, // 是否全选

			invitePersonList: [ // 左边数据
				{
					name: '王泽',
					tel: '1529585496',
					isChecked: false,
					id: 1
				},
				{
					name: '张花花',
					tel: '1529585496',
					isChecked: false,
					id: 2
				},
				{
					name: '王泽强',
					tel: '1529585496',
					isChecked: false,
					id: 3
				},
				{
					name: '李狗子',
					tel: '1529585496',
					isChecked: false,
					id: 4
				}
			], // 邀请人员列表

			selectedInvitedPerson: [],//右边数据
		}
	},
	created () {

	},
	methods: {
		//左边-全选
		inviteAllPerson () {
			this.inviteAll = !this.inviteAll
			if (this.inviteAll && !this.selectedInvitedPerson.length) { // 已全选且右边列表无数据
				this.selectedInvitedPerson = this.invitePersonList
				this.invitePersonList = []
			} else if (!this.inviteAll && !this.invitePersonList.length) { // 取消全选且左边列表无数据
				this.invitePersonList = this.selectedInvitedPerson
				this.selectedInvitedPerson = []
			} else if (this.inviteAll && this.selectedInvitedPerson.length) { // 已全选且右边列表有数据
				for (var i = 0;i < this.invitePersonList.length;i++) {
					this.selectedInvitedPerson.push(this.invitePersonList[i]);
				}
				this.invitePersonList = []
			}
		},

		// 左边点击后面的多选框
		changeInviteStatus (item, index2) {
			// 判断当前数据是否都选中
			if (this.invitePersonList.length == 1) {
				this.inviteAll = true
			} else {
				this.inviteAll = false
			}
			if (this.selectedInvitedPerson.indexOf(item) === -1) {
				this.selectedInvitedPerson.push(item);
				this.invitePersonList.splice(index2, 1)
			}
		},

		// 右边删除全部
		deleteAllSelectedPerson () {
			this.inviteAll = false
			if (this.invitePersonList.length == 0) { // 左边没有数据
				this.invitePersonList = this.selectedInvitedPerson
				this.selectedInvitedPerson = []
			} else {
				for (var i = 0;i < this.selectedInvitedPerson.length;i++) {
					this.invitePersonList.push(this.selectedInvitedPerson[i]);
				}
				this.selectedInvitedPerson = []
			}

		},

		// 右边删除一个
		deleteSelectedPerson (item, index) {
			this.inviteAll = false
			if (this.invitePersonList.indexOf(item) === -1) {
				this.selectedInvitedPerson.splice(index, 1)
				this.invitePersonList.push(item);
			}
		},
	},
}
</script>
<style scoped>
.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid green;
	width: 900px;
}
.left_box {
	width: 400px;
	height: 500px;
	display: flex;
	flex-direction: column;
	border: 1px solid pink;
	background: pink;
}
.right_box {
	width: 400px;
	height: 500px;
	display: flex;
	flex-direction: column;
	border: 1px solid pink;
	background: pink;
}
.left_box_list {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border: 1px solid pink;
	background: pink;
}
</style>