uniapp小程序盒子拖拽排序

利用movable-area实现盒子拖拽

		<movable-area :style="[getAreaStyle]">
			<movable-view
				v-for="(item, index) in list"
				:animation="animation"
				:direction="direction"
				:key="item.key"
				:damping="damping"
				:x="item.x"
				:y="item.y"
				:disabled="longpress ? disabled : false"
				@touchstart="handleDragStart(index)"
				@change="handleMoving"
				@touchend="handleDragEnd"
				:style="[getViewStyle]"
				class="base-drag-wrapper"
				:class="{ active: activeIndex === index }"
			>
				<view class="file-item-container" @click="fileClick(item)">
					<u-checkbox-group @change="checkChange($event, item)" v-if="isTz">
						<u-checkbox :checked="item.look" size="32" activeColor="#471EC0" shape="square" :labelDisabled="true"></u-checkbox>
					</u-checkbox-group>
          <view class="file-icon">
						<image v-show="item.fileType=='PPT'" class="pdf-file" :src="iconSrc('icon-ppt')" alt="" mode="aspectFit"></image>
            <image v-show="item.fileType=='PDF'" class="pdf-file" :src="iconSrc('icon-pdf')" alt="" mode="aspectFit"></image>
            <image v-show="item.fileType=='WORD'" class="pdf-file" :src="iconSrc('icon-doc')" alt="" mode="aspectFit"></image>
            <image v-show="item.fileType=='VIDEO'" class="pdf-file" :src="iconSrc('icon-mp4')" alt="" mode="aspectFit"></image>
            <image v-show="item.fileType=='IMAGE'" class="pdf-file" :src="iconSrc('icon-jpg')" alt="" mode="aspectFit"></image>
          </view>
          <view class="file-content">
            <view class="file-name">{{ item.fileName }}</view>
            <view :class="['file-content-bottom', isTz?'':'has-sort']">
              <view class="file-size">
                <text class="update">更新日期</text>
                <text class="time">{{ item.updateTime }}</text>
              </view>
							<u-icon @longpress="handleLongpress" name="list" size="38" v-if="isTz"></u-icon>
              <view class="file-opt-container">
                <text class="number">{{ item.readNumber }}</text>
                <text>阅读</text>
              </view>
            </view>
          </view>
        </view>
			</movable-view>
		</movable-area>

长按开始拖拽

	handleLongpress() {
			this.disabled = false;
		},

拖拽事件

//拖拽开始
		handleDragStart(index) {
			this.activeIndex = index;
			this.oldIndex = index;
		},

		//拖拽中
		handleMoving(e) {
			if (e.detail.source !== 'touch' || this.disabled) return;
			const { x, y } = e.detail;
			Object.assign(this.tempDragInfo, { x, y });
			const currentX = Math.floor((x + this.getItemWidth / 2) / this.getItemWidth);
			const currentY = Math.floor((y + this.getItemHeight / 2) / this.getItemHeight);

			this.moveToIndex = Math.min(currentY * this.column + currentX, this.list.length - 1);

			if (this.oldIndex !== this.moveToIndex && this.oldIndex !== -1 && this.moveToIndex !== -1) {
				const newList = this.deepCopy(this.cloneList);
				newList.splice(this.moveToIndex, 0, ...newList.splice(this.activeIndex, 1));

				this.list.forEach((item, index) => {
					if (index !== this.activeIndex) {
						const itemIndex = newList.findIndex(val => val[this.itemKey] === item[this.itemKey]);
						[item.x, item.y] = this.getPosition(itemIndex);
					}
				});
				this.oldIndex = this.moveToIndex;
				this.scrollIntoView();
			}
		},
    	//拖拽结束
		handleDragEnd(e) {
			if (this.disabled) return;
			if (this.moveToIndex !== -1 && this.activeIndex !== -1 && this.moveToIndex !== this.activeIndex) {
				this.cloneList.splice(this.moveToIndex, 0, ...this.cloneList.splice(this.activeIndex, 1));
			} else {
				this.$set(this.list[this.activeIndex], 'x', this.tempDragInfo.x);
				this.$set(this.list[this.activeIndex], 'y', this.tempDragInfo.y);
			}
			this.initList(this.cloneList);
			const endList = this.list.map(item => this.omit(item, ['x', 'y', 'key']));
			this.$emit('input', endList);
			this.$emit('end', endList);

			this.activeIndex = -1;
			this.oldIndex = -1;
			this.moveToIndex = -1;
			this.disabled = true;
		},