crm-mobile/components/wk-drag-sort/mixins.js

import { deepCopy } from '@/utils/lib.js'

export default {
	data() {
		return {
			allBoundary: [],
			moveItemData: null,
			activeIndex: -1,
			
			moveTop: 0,
			moveLeft: 0,
			itemWidth: 0,
			itemHeight: 0,
			showMoveItem: false,
			
			dealyTimer: null,
			dealy: 50
		}
	},
	computed: {
		moveStyle() {
			return {
				left: this.moveLeft + 'px',
				top: this.moveTop + 'px',
				width: this.itemWidth + 'px',
				height: this.itemHeight + 'px',
				visibility: this.showMoveItem ? 'unset' : 'hidden'
			}
		}
	},
	watch: {
		sortList: {
			handler() {
				this.moveItemData = this.sortList[0]
				this.$nextTick(function() {
					this.getAllBoundary()
				})
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		getAllBoundary() {
			const that = this
			uni.createSelectorQuery()
				.in(this)
				.selectAll('.wk-drag-sort-item')
				.boundingClientRect(data => {
					console.log('getAllBoundary: ', data)
					that.allBoundary = data.map(item => {
						return {
							...item,
							beginX: item.left,
							endX: item.left + item.width,
							beginY: item.top,
							endY: item.top + item.height,
						}
					})
				})
				.exec();
		},
		
		handleTouchstart(evt, index) {
			if (this.dealyTimer) {
				clearTimeout(this.dealyTimer)
				this.dealyTimer = null
			}
			this.dealyTimer = setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select(`#wk-drag-sort-item-${index}`).boundingClientRect(data => {
					this.moveTop = data.top
					this.moveLeft = data.left
					
					this.moveItemData = this.sortList[index]
					this.activeIndex = index
					
					this.itemWidth = data.width
					this.itemHeight = data.height
					this.showMoveItem = true; // 悬浮开始
					console.log('start move')
					
					clearTimeout(this.dealyTimer)
					this.dealyTimer = null
				}).exec();
			}, this.dealy)
		},
		
		handleTouchmove(evt, index) {
			const touch = evt.touches[0];
			this.moveLeft = touch.clientX - this.itemWidth / 2
			this.moveTop = touch.clientY - this.itemHeight / 2
		},
		
		handleTouchend(evt, index) {
			if (this.dealyTimer) {
				clearTimeout(this.dealyTimer)
				this.dealyTimer = null
			}
			const overIndex = this.findOverIndex()
			
			if (overIndex !== -1) {
				const arr = deepCopy(this.sortList)
				arr[overIndex] = arr.splice(this.activeIndex, 1, arr[overIndex])[0]
				this.handleSort(arr)
			}
			
			this.clearMoveItem()
		},
		
		/**
		 * 悬浮结束
		 */
		clearMoveItem() {
			this.showMoveItem = false
			this.activeIndex = -1
			this.moveLeft = 0
			this.moveTop = 0
		},
		
		// 找到停下的元素的下标
		findOverIndex() {
			for (let i = 0; i < this.allBoundary.length; i++) {
				const item = this.allBoundary[i]
				if (
					this.moveLeft > item.beginX &&
					this.moveLeft < item.endX &&
					this.moveTop > item.beginY &&
					this.moveTop < item.endY
				) {
					return i
				}
			}
			return -1
		}
	}
}