SwiftUI Drag and Drop Reordering & Multi-Item Drag

import SwiftUI

struct CardValue: Transferable, Identifiable, Hashable {
    let id: UUID
    let rank: String
    let suit: String

    static var transferRepresentation: some TransferRepresentation {
        CodableRepresentation(contentType: .data)
    }
}

extension CardValue: Codable {}

enum PileID: String, Hashable {
    case left, right
}

struct MultiPileReorderView: View {
    @State private var leftPile: [CardValue] = [
        CardValue(id: UUID(), rank: "A", suit: "♠"),
        CardValue(id: UUID(), rank: "2", suit: "♠"),
        CardValue(id: UUID(), rank: "3", suit: "♠")
    ]
    @State private var rightPile: [CardValue] = [
        CardValue(id: UUID(), rank: "4", suit: "♥"),
        CardValue(id: UUID(), rank: "5", suit: "♥"),
        CardValue(id: UUID(), rank: "6", suit: "♥")
    ]

    var body: some View {
        HStack(spacing: 32) {
            pileView(title: "Left", cards: $leftPile, pileID: .left)
            pileView(title: "Right", cards: $rightPile, pileID: .right)
        }
        .padding()
        .reorderContainer(itemType: CardValue.self, id: PileID.self) { difference, sourceID, destinationID in
            applyDifference(difference, sourceID: sourceID, destinationID: destinationID)
        }
        .dropPreviewsFormation(.stack)
    }

    @ViewBuilder
    func pileView(title: String, cards: Binding<[CardValue]>, pileID: PileID) -> some View {
        VStack(spacing: 8) {
            Text(title).font(.headline)
            ForEach(cards) { card in
                Text("\(card.rank)\(card.suit)")
                    .frame(width: 60, height: 80)
                    .background(RoundedRectangle(cornerRadius: 8).fill(.white).shadow(radius: 2))
                    .reorderable()
            }
        }
        .reorderableContainerMember(id: pileID)
    }

    func applyDifference(
        _ difference: CollectionDifference<CardValue>,
        sourceID: PileID?,
        destinationID: PileID?
    ) {
        // Apply removals from source pile
        if let sourceID {
            var source = pile(for: sourceID)
            for removal in difference.removals {
                if case .remove(let offset, _, _) = removal {
                    source.remove(at: offset)
                }
            }
            setPile(source, for: sourceID)
        }
        // Apply insertions to destination pile
        if let destinationID {
            var destination = pile(for: destinationID)
            for insertion in difference.insertions {
                if case .insert(let offset, let element, _) = insertion {
                    destination.insert(element, at: offset)
                }
            }
            setPile(destination, for: destinationID)
        }
    }

    func pile(for id: PileID) -> [CardValue] {
        id == .left ? leftPile : rightPile
    }

    func setPile(_ cards: [CardValue], for id: PileID) {
        if id == .left { leftPile = cards } else { rightPile = cards }
    }
}

#Preview {
    MultiPileReorderView()
        .background(Color.green.opacity(0.4))
}