A case of dragging and adding products based on the uniapp WeChat applet

Effect example picture

code function

<template>
	<movable-area class="movable-area">
		<view class="dragExample-wrap">
			<view class="dragExample-header" id="shopCard">
				<view class="noData">
					<image class="noData-icon" src="@/static/nodata/nodata_address.png"></image>
					<text class="noData-text">长按下方商品拖入此处</text>
				</view>
			</view>
			<view style="height: 200px;"></view>
			<!-- 内容滚动区域-start -->
			<scroll-view class="scrollView" :style="{'height':scrollheight+'px'}" :scroll-y="isScroll"
				lower-threshold="60" @scrolltolower="scrolltolowerHandle">
				<view class="dragExample-image">
					<template v-for="item in 30">
						<view class="dragExample-item" :key="item">
							<image @longpress="longPressHandle" @touchstart="startHandle" @touchmove="moveHandle"
								@touchend="endHandle" :data-src="tempUrl" :data-id="item" class="dragExample-item-img"
								mode="widthFix" :src="tempUrl"></image>
						</view>
					</template>
				</view>
			</scroll-view>
			<!-- 内容滚动区域-end -->
		</view>

		<!-- 可移动视图-start-->
		<movable-view class="movable-view" :x="x" :y="y" damping="5000" direction="all">
			<image class="movable-img" :src="moveUrl" v-if="hidden"></image>
		</movable-view>
		<!-- 可移动视图-end-->
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {
				tempUrl: 'https://scpic2.chinaz.net/files/default/imgs/2023-05-24/886064fd16ee10c0_s.jpg',
				//滚动区域的高度
				scrollheight: 320,
				//拖动的基本数据
				x: 0,
				y: 0,
				moveUrl: "",
				hidden: false, //是否隐藏被拖动的图片
				flag: false, //是否开始移动
				isScroll: true, //是否允许滚动
			};
		},
		onLoad() {

		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					console.log("[xitong]", res.windowHeight)
					this.scrollheight = res.windowHeight - 230;
				}
			})
		},
		methods: {
			/**
			 * 向下滚动触发事件
			 * **/
			scrolltolowerHandle() {
				console.log("[movable-area-上拉加载更多]")
			},
			longPressHandle(e) {
				this.moveUrl = e.target.dataset.src;
				this.hidden = false;
				this.flag = true;
				this.isScroll = false;
			},
			startHandle(e) {},
			moveHandle(e) {
				if (this.flag) {
					this.hidden = true;
					const x = e.touches[0].pageX;
					const y = e.touches[0].pageY;

					this.x = x - 37;
					this.y = y - 52;
				}

			},
			/**
			 * 拖动结束
			 * **/
			endHandle(e) {
				const clientX = e.changedTouches[0].clientX;
				const clientY = e.changedTouches[0].clientY;
				const query = uni.createSelectorQuery().in(this);
				query.select("#shopCard").boundingClientRect((rect) => {
					if (clientX > rect.left && clientX < rect.right && clientY > rect.top && clientY < rect.bottom) {
						this.dragEventAPI();
					}
				}).exec();

				if (!this.flag) {
					return;
				}
				this.hidden = false;
				this.flag = false;
				this.isScroll = true;
			},
			/**
			 * 图片拖入添加区域触发事件
			 * **/
			dragEventAPI() {
				console.log("[加入]")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.movable-area {
		width: 100%;
		height: 100%;

		.movable-view {
			z-index: 200;
		}

		.movable-img {
			width: 74px;
			height: 103px;
		}

	}

	.dragExample-wrap {
		width: 91.47%;
		margin: 12px auto;
		display: flex;
		flex-direction: column;

		.dragExample-header {
			border: 1px solid #334B61;
			border-radius: 8px;
			height: 200px;
			position: fixed;
			top: 0px;
			left: 4.265%;
			right: 4.265%;
			z-index: 5;
			background-color: #0e1021;

			//暂无数据
			.noData {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 50px;

				.noData-icon {
					width: 144.5px;
					height: 47px;
				}

				.noData-text {
					font-size: 15px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 12px;
				}
			}
		}

		.scrollView {
			border: 1px solid #334B61;
			border-radius: 8px;
			width: 100%;
			position: relative;

			.dragExample-image {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.dragExample-item {
					--width: 23%;
					width: var(--width);
					height: auto;
					margin: 6px calc((100% - var(--width)*4)/8);

					.dragExample-item-img {
						border-radius: 4px;
						width: 100%;
						height: auto;
						display: block;
					}
				}
			}
		}
	}
</style>

web API