uni-app简单实现一下拖拽排序

略略大魔王丶

已于 2022-10-26 12:17:19 修改

阅读量1.2w

点赞数 36

CC 4.0 BY-SA版权

分类专栏：前端文章标签：小程序 javascript vue

于 2022-04-28 12:40:12 首次发布

本文链接：https://blog.csdn.net/LueLueLue77/article/details/124471060

闲来无事，就想着写个拖拽排序的组件好了，虽然效果差了些，但以后我变强了，在优化嘛。🤪

示例：

创建组件（直接上代码）：

<template>
	<view class="drag-and-drop-sort-A" :containerSize="[containerSize]">
		<template v-if="controlsPositionArray.length !== 0">
			<view v-for="(item, index) in controlsArray" :key="index" class="_item"
				:style="{'transition': (curretnControlsIndex === index ? 'initial' : '.3s'), 'z-index': (curretnControlsIndex === index ? 1 : 0), 'width': controlsSize.width + 'px', 'height': controlsSize.height + 'px', 'top': controlsPositionArray[index].top + 'px',  'left': controlsPositionArray[index].left + 'px'}">
				<view @touchstart="handleTouchstart($event, index)" @touchmove="handleTouchmove" @touchend="handleTouchend" :style="{'background': item}" style="width: 100%; height: 100%;">
					<slot name="content" :item="item"></slot>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "drag-and-drop-sort-A",
		props: {
			// 容器大小
			containerSize: {
				type: Object,
				default: () => ({ wdith: '100vw', height: '100vh' }),
			},
			// 控件的大小
			controlsSize: {
				type: Object,
				default: () => ({ width: 0, height: 0 }),
			},
			// 数据列表
			controlsList: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				// 控件列表
				controlsArray: [],
				// 每行最大存放的个数
				maxWidthCount: 0,
				// 控件的间距
				margin: {