UICollectionView水平滚动时Drag&Drop交互异常问题求助

我之前在做UICollectionView水平滚动拖放的时候，也踩过一模一样的坑！系统默认的拖放交互逻辑是针对垂直滚动布局设计的，切换成水平后，不管是拖拽预览的偏移还是目标插入位置的计算，都会沿用垂直方向的逻辑，就会出现你说的位置错乱问题。

下面是我实测有效的解决方案，分几个步骤来调整：

1. 自定义拖拽预览的偏移，匹配水平视觉效果 #

默认的拖拽预览会以垂直滚动的逻辑来计算偏移，导致水平拖拽时预览位置不对。我们可以在创建DragItem的时候，针对水平布局调整预览的偏移参数：

func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
    guard let cell = collectionView.cellForItem(at: indexPath) else { return [] }
    let provider = NSItemProvider(object: indexPath as NSItemProviderWriting)
    let dragItem = UIDragItem(itemProvider: provider)
    
    // 针对水平布局调整预览偏移
    if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout, 
       flowLayout.scrollDirection == .horizontal {
        let previewParams = UIDragPreviewParameters()
        // 让预览的水平偏移匹配当前cell在CollectionView中的位置，保证拖拽时视觉对齐
        previewParams.centerOffset = CGVector(
            dx: collectionView.bounds.midX - cell.center.x,
            dy: 0
        )
        dragItem.previewParameters = previewParams
    }
    
    return [dragItem]
}

2. 修正目标插入位置的计算逻辑 #

水平滚动时，系统判断插入位置的逻辑还是按垂直方向来的，我们需要在dropSessionDidUpdate方法里，根据拖拽点的水平位置重新计算目标IndexPath：

func collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UICollectionViewDropProposal {
    guard collectionView.hasActiveDrag, let destIndex = destinationIndexPath else {
        return UICollectionViewDropProposal(operation: .cancel)
    }
    
    var adjustedDestIndex = destIndex
    // 水平布局下，根据拖拽点的x坐标判断插入位置
    if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout, 
       flowLayout.scrollDirection == .horizontal {
        let dragLocation = session.location(in: collectionView)
        guard let cell = collectionView.cellForItem(at: destIndex) else {
            return UICollectionViewDropProposal(operation: .move, intent: .insertAtDestinationIndexPath(adjustedDestIndex))
        }
        // 如果拖拽点在cell左半部分，插入当前位置；在右半部分，插入下一个位置
        adjustedDestIndex = dragLocation.x < cell.frame.midX 
            ? destIndex 
            : IndexPath(item: destIndex.item + 1, section: destIndex.section)
    }
    
    return UICollectionViewDropProposal(operation: .move, intent: .insertAtDestinationIndexPath(adjustedDestIndex))
}

3. 自定义布局的额外适配（如果用了非系统布局） #

如果你用的是自定义UICollectionViewLayout，还需要重写targetIndexPathForInteractivelyMovingItem方法，适配水平方向的位置计算：

override func targetIndexPathForInteractivelyMovingItem(toPosition position: CGPoint) -> IndexPath {
    // 这里根据你的布局逻辑计算对应的item，示例是等宽item的情况
    guard let collectionView = collectionView else { return IndexPath(item: 0, section: 0) }
    let itemWidth = collectionView.frame.width // 替换成你实际的item宽度计算逻辑
    let targetItemIndex = max(0, min(Int(position.x / itemWidth), collectionView.numberOfItems(inSection: 0) - 1))
    return IndexPath(item: targetItemIndex, section: 0)
}

这些调整主要是把系统默认的垂直方向逻辑改成水平方向的，保证拖拽时的视觉效果和位置判断都和垂直滚动时一致。你可以根据自己的布局细节再微调参数，比如item间距、inset这些，适配到你的场景里。

内容的提问来源于stack exchange，提问作者guru