[JavaScript知识库]uni-app做小程序元素的拖拽效果(vue适用)

直接上代码 ，直接复制到编译器可看效果

<template>
	<view>
		<view class="area">
			<view v-for="(item,index) in list" :key="index" class="movable">
				<view v-show="!item.select" :data-item="item" :data-index="index" class="movable-view"
					:style="{backgroundColor:item.color}" @touchstart="test.touchstart" @touchmove="test.touchmove"
					@touchend="test.touchend" @touchcancel="test.touchend">
					{{item.name}}
				</view>
				<view v-if="item.select" :style="{backgroundColor: '#3B0000'}">空空如也</view>
			</view>
		</view>
		<view class="box">
			<view class="box-view">添加购物车</view>
		</view>
		<view class="area">
			<view v-for="(item,index) in selectList" :key="index" class="movable" @click="deleteItem(item.id)">
				<view class="movable-view" :style="{backgroundColor:item.color}">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>
<script module="test" lang="wxs">
	var startX = 0
	var startY = 0

	function touchstart(event, ins) {
		console.log("touchstart")
		var touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY
		console.log(startX, startY);
		ins.selectAllComponents('.movable-view')[event.target.dataset.index].setStyle({
			position: 'fixed',
			left: startX + 'px',
			top: startY + 'px',
			transform: 'scale(1.2) translate(-50%,-50%)',
			opacity: '0.8',
		})
	}

	function touchmove(event, ins) {
		var touch = event.touches[0] || event.changedTouches[0]
		var pageX = touch.pageX
		var pageY = touch.pageY
		startX = pageX
		startY = pageY
		console.log(startX, startY);
		ins.selectAllComponents('.movable-view')[event.target.dataset.index].setStyle({
			position: 'fixed',
			left: pageX + 'px',
			top: pageY + 'px',
			transform: 'scale(1.2) translate(-50%,-50%)',
			opacity: startY > 400 ? '1' : '0.8'
		})
		if (startY > 400) {
			ins.selectComponent('.box-view').setStyle({
				'border-color': '#14279B',
				color: '#14279B',
			})
		} else {
			ins.selectComponent('.box-view').setStyle({
				'border-color': '#18B566',
				color: '#18B566',
			})
		}
		return false
	}

	function touchend(event, ins) {
		console.log(JSON.stringify(event));
		var index = event.target.dataset.index;
		var item = event.target.dataset.item;
		console.log(startX, startY);
		console.log(index);
		if (startY > 400) {
			ins.callMethod('selectItem', item.id);
		}
		ins.selectAllComponents('.movable-view')[index].setStyle({
			position: 'static',
			left: item.startX + 'px',
			top: item.startY + 'px',
			transform: 'scale(1)',
			opacity: '1',
		})
		ins.selectComponent('.box-view').setStyle({
			'border-color': '#18B566',
			color: '#18B566',
		})
	}

	module.exports = {
		msg: 'Hello',
		touchstart: touchstart,
		touchmove: touchmove,
		touchend: touchend,
	}
</script>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: "香蕉",
					color: "#F0A500",
					select: false,
				}, {
					id: 2,
					name: "苹果",
					color: "#334756",
					select: false,
				}, {
					id: 3,
					name: "西红柿",
					color: "#082032",
					select: false,
				}, {
					id: 4,
					name: "草莓",
					color: "#90AACB",
					select: false,
				}, {
					id: 5,
					name: "橙子",
					color: "#F9D5A7",
					select: false,
				}, ],
				selectList: [],
			}
		},
		methods: {
			selectItem(id) {
				const index = this.list.findIndex(item => item.id == id);
				this.$set(this.list[index], 'select', true);
				const item = this.list[index];
				this.selectList.push(item);
			},
			deleteItem(id) {
				const i = this.list.findIndex(item => item.id == id);
				this.$set(this.list[i], 'select', false);
				const index = this.selectList.findIndex(item => item.id == id);
				this.selectList.splice(index, 1);
			},
		}
	}
</script>

<style>
	.area {
		padding: 16px;
		height: 400px;
		overflow: hidden;
	}

	.movable {
		float: left;
		width: 33.33%;
		height: 90px;
	}

	.movable view {
		width: 50px;
		height: 50px;
		margin: 20px auto;
		color: white;
		text-align: center;
		line-height: 50px;
		background-color: red;
	}

	.box view {
		border: 1px solid #18B566;
		color: #18B566;
		text-align: center;
		line-height: 40px;
		margin: 20px;
	}
</style>