I am working on a card game where a hand starts with 10 cards, could go up dramatically, but also go down to 0 cards. I would like to be able to show each card and drag them around individually to group them. I can do this if I hard code say the 10 starting card, but thought I would try ForEach to then show however many is in the count, but so far the cards are group and all drag together. Thanks!

This is the hardcoded version that allows me to drag individual images: HStack { VStack{Image(playernames.showcards[0]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card1pos.x, y: card1pos.y).gesture(DragGesture().onChanged { value in card1pos = value.location})} VStack{Image(playernames.showcards[1]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card2pos.x, y: card2pos.y).gesture(DragGesture().onChanged { value in card2pos = value.location})} VStack{Image(playernames.showcards[2]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card3pos.x, y: card3pos.y).gesture(DragGesture().onChanged { value in card3pos = value.location})} VStack{Image(playernames.showcards[3]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card4pos.x, y: card4pos.y).gesture(DragGesture().onChanged { value in card4pos = value.location})} VStack{Image(playernames.showcards[4]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card5pos.x, y: card5pos.y).gesture(DragGesture().onChanged { value in card5pos = value.location})} VStack{Image(playernames.showcards[5]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card6pos.x, y: card6pos.y).gesture(DragGesture().onChanged { value in card6pos = value.location})} VStack{Image(playernames.showcards[6]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card7pos.x, y: card7pos.y).gesture(DragGesture().onChanged { value in card7pos = value.location})} VStack{Image(playernames.showcards[7]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card8pos.x, y: card8pos.y).gesture(DragGesture().onChanged { value in card8pos = value.location})} VStack{Image(playernames.showcards[8]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card9pos.x, y: card9pos.y).gesture(DragGesture().onChanged { value in card9pos = value.location})} VStack{Image(playernames.showcards[9]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card10pos.x, y: card10pos.y).gesture(DragGesture().onChanged { value in card10pos = value.location})} }

    **       Here is what I have using ForEach - except this groups them together:**

struct ContentView: View { @State private var card1pos: CGPoint = CGPoint(x: 30, y: 40) var mycards: [String] = ["2_of_spades", "3_of_diamonds", "4_of_spades","joker_red"] var body: some View {

    HStack {
        ForEach(0..<mycards.count, id: \.self) { index in
            VStack{Image(mycards[index]).resizable().scaledToFit().frame(width: 40, height: 60).position(x: card1pos.x+CGFloat(index), y: card1pos.y+CGFloat(index)).gesture(DragGesture().onChanged { value in card1pos = value.location})}
        }
    }
}

}

Hi, you could create a Card View so that each card holds it's own position, i used text for the example but you could change it to images

struct Card: View {
    @State var position: CGPoint

    var body: some View {
        Text("1")
            .padding(5)
            .font(.title)
            .background(.red)
            .position(x: position.x, y: position.y)
            .gesture(
                DragGesture()
                    .onChanged { position = $0.location }

            )
    }
}

then in ContentView use a forEach with the number of cards you want:

struct ContentView: View {
    let numberOfCards = 10
    @State private var position = CGPoint(x: 30, y: 40)

    var body: some View {
        VStack(spacing: 0) {
            ForEach(0..<numberOfCards, id: \.self) { _ in
                Card(position: position)
                    .gesture(
                        DragGesture()
                            .onChanged { position = $0.location }

                    )
            }
        }

    }
}

Hope it's what you're looking for.

thanks, let me try it out!

@foremank, when posting code to these forums, place three backticks ``` on the line before your code and three backticks ``` on the line after your code so that it will be formatted properly. You can also highlight an entire code block and click the </> button on the toolbar to wrap the block for you.

This makes it far easier to read and also makes it easier for other posters to copy/paste the code in order to test solutions and such.

Doing this will ensure that you end up with something like this:

func printSomething(_ thing: String?) {
    if let thing = thing {
        print(thing)
    } else {
        print("nothing there")
    }
}

instead of this:

func printSomething(_ thing: String?) { if let thing = thing { print(thing) } else { print("nothing there") } }