uniapp长按拖动格子到其他格子后实现互换位置

在 UniApp 中，实现长按拖动格子并交换其位置的功能通常涉及到两个关键步骤：触摸事件处理和数据操作。

1. 触摸监听：首先，你需要在需要支持长按拖动的元素上添加触摸事件监听，如`touchstart`, `touchmove`, 和 `touchend`。在`touchstart`事件中，记录下开始拖动的节点、起始位置和当前选中的节点（如果有的话）；在`touchmove`事件中，根据手指移动的位置计算目标新位置，并更新视图；`touchend`时，检查是否完成拖动，如果是，则交换两个节点的位置。

Page({
  data: {
    dragNode: null,
    startTouchX: 0,
    startTouchY: 0
  },
  touchStart(e) {
    this.data.dragNode = e.target;
    this.data.startTouchX = e.touches[0].clientX;
    this.data.startTouchY = e.touches[0].clientY;
  },
  touchMove(e) {
    // 计算目标位置并更新布局
    const touchX = e.touches[0].clientX;
    const touchY = e.touches[0].clientY;

    // 根据实际需求计算新的位置并更新UI
    let newNodeIndex = ...; // 新的位置计算逻辑
    this.setData({ dragNode: { index: newNodeIndex } });
  },
  touchEnd() {
    // 检查是否完成拖放并交换位置
    if (/* 条件判断 */) {
      // 获取相邻节点的信息
      let targetNode = ...;
      let temp = this.data.dragNode;
      this.data.dragNode = targetNode;
      targetNode = temp;
      
      // 更新数据模型中的节点位置
      this.data.dragNode.index = targetNode.index;
      targetNode.index = this.data.dragNode.index;
      
      // 视图更新
      this.setData(this.data);
    }
  }
})