SwiftUI Drag and Drop Reordering & Multi-Item Drag

import SwiftUI
import UniformTypeIdentifiers

// MARK: - Model

struct PlayingCard: Identifiable, Hashable, Transferable {
    let id: UUID
    let label: String
    let color: Color

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

extension UTType {
    static let playingCard = UTType(exportedAs: "com.example.playingcard")
}

extension PlayingCard: Codable {
    enum CodingKeys: String, CodingKey { case id, label, color }
    init(from decoder: Decoder) throws {
        let c = try decoder.container(keyedBy: CodingKeys.self)
        id = try c.decode(UUID.self, forKey: .id)
        label = try c.decode(String.self, forKey: .label)
        color = .blue
    }
    func encode(to encoder: Encoder) throws {
        var c = encoder.container(keyedBy: CodingKeys.self)
        try c.encode(id, forKey: .id)
        try c.encode(label, forKey: .label)
    }
}

// MARK: - Pile View

struct PileView: View {
    let pileID: Int
    @Binding var cards: [PlayingCard]

    var body: some View {
        VStack(spacing: -40) {
            ForEach(cards) { card in
                RoundedRectangle(cornerRadius: 10)
                    .fill(card.color.opacity(0.85))
                    .frame(width: 80, height: 110)
                    .overlay(Text(card.label).bold().foregroundStyle(.white))
                    .shadow(radius: 3)
                    // Make each card individually reorderable within the container
                    .reorderable(id: card.id)
            }
        }
        .frame(minHeight: 150, alignment: .top)
    }
}

// MARK: - Game View

struct CardGameView: View {
    @State private var pile1: [PlayingCard] = [
        PlayingCard(id: UUID(), label: "A♠", color: .indigo),
        PlayingCard(id: UUID(), label: "K♠", color: .indigo),
        PlayingCard(id: UUID(), label: "Q♠", color: .indigo),
    ]
    @State private var pile2: [PlayingCard] = [
        PlayingCard(id: UUID(), label: "A♥", color: .red),
        PlayingCard(id: UUID(), label: "K♥", color: .red),
    ]

    var body: some View {
        HStack(spacing: 24) {
            PileView(pileID: 0, cards: $pile1)
            PileView(pileID: 1, cards: $pile2)
        }
        .padding()
        // Scope reordering across BOTH piles in one container
        .reorderContainer(itemType: PlayingCard.self) { difference in
            // Apply a cross-pile move: remove from source, insert at destination
            var combined = pile1 + pile2
            combined.applyChanges(difference)
            pile1 = Array(combined.prefix(pile1.count + difference.insertions.count - difference.removals.count))
            pile2 = Array(combined.dropFirst(pile1.count))
        }
        // Multi-card drag: lift a card plus all cards above it in pile1
        .dragContainer(itemType: PlayingCard.self) { cardID in
            guard let idx = pile1.firstIndex(where: { $0.id == cardID }) else { return [] }
            return Array(pile1[idx...])
        }
        .dragPreviewsFormation(.stack)
        .dropPreviewsFormation(.stack)
        .background(Color.green.opacity(0.3))
        .navigationTitle("Card Piles")
    }
}

// MARK: - Entry Point

struct ContentView: View {
    var body: some View {
        NavigationStack {
            CardGameView()
        }
    }
}