How to rearrange views in SwiftUI ZStack by dragging

Question

How can I rearrange a view's position in a ZStack by dragging it above or below another view (e.g. in this instance how can I rearrange the order of the cards in the deck by dragging a card above or below another card, to move the dragged card behind or in front of said card in deck).

I want for the card to change indices when dragged up or down in the stack and fluidly appear behind each and every card in the stack as it is dragged- and stay there on mouse up.

Summary: In other words, the card dragged and the cards above it should switch as I drag up and the card dragged and the cards below it should switch as I drag down.

I figure this has something to do with changing the ZStack order in struct CardView: View and updating the position from inside DragGesture().onChanged by evaluating how much the card has been dragged (perhaps by viewing the self.offset value) but I have not been able to work out how to do this in a reliable way.

Here's what I have right now:

drawing

Code:

import SwiftUI

let cardSpace:CGFloat = 10

struct ContentView: View {
    @State var cardColors: [Color] = [.orange, .green, .yellow, .purple, .red, .orange, .green, .yellow, .purple]
    var body: some View {
            HStack {
                VStack {
                    CardView(colors: self.$cardColors)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .position(x: 370, y: 300)
    }
}

struct CardView: View {
    @State var offset = CGSize.zero
    @State var dragging:Bool = false
    @State var tapped:Bool = false
    @State var tappedLocation:Int = -1
    @Binding var colors: [Color]
    @State var locationDragged:Int = -1
    var body: some View {
        GeometryReader { reader in
            ZStack {
                ForEach(0..

user_8457280 · Answer

check this out:

the "trick" is that you just need to reorder the z order of the items. therefore you have to "hold" the cards in an array.

let cardSpace:CGFloat = 10

struct Card : Identifiable, Hashable, Equatable {

    static func == (lhs: Card, rhs: Card) -> Bool {
        lhs.id == rhs.id
    }


    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }

    var id = UUID()

    var intID : Int

    static let cardColors: [Color] = [.orange, .green, .yellow, .purple, .red, .orange, .green, .yellow, .purple]

    var zIndex : Int
    var color : Color
}

class Data: ObservableObject {

    @Published var cards : [Card] = []

    init() {
        for i in 0.. 60 ||
                        self.offset.height < -60 {
                            withAnimation {

                                if let index = self.data.cards.firstIndex(of: self.card) {
                                    self.data.cards.remove(at: index)
                                    self.data.cards.append(self.card)

                                    for index in 0..

user_12299030 · Answer

Just an idea (cause requires re-think/re-code your solution). Reorder in your case needs usage/modification of card zIndex so it needs to be stored somewhere.

Thus instead of directly use color as model you needed more explicit model object

struct Card {
   var color: Color
   var deckOrder: Int
}

Note: below is in pseudo-code, you have to adapt it yourself

next, you keep and iterate by cards (and I would separate them info ObsesrvableObject view model)

ForEach(Array(vm.cards.enumerated()), id: \.element) { i, card in
    ColorCard(reader:reader, i:i, cards: self.$vm.cards, 
              offset: self.$offset, tappedLocation: self.$tappedLocation, 
              locationDragged:self.$locationDragged, tapped: self.$tapped, 
              dragging: self.$dragging)
      .zIndex(card.deckOrder)
}

now changing card.deckOrder on drag you will change zIndex of view/card in deck.

user_11430555 · Answer

Building on Chris's answer I have come up with this. Some shortcomings are: it requires one drag per movement versus one drag to move up or down the deck indefinitely.

Demo:

import SwiftUI

let cardSpace:CGFloat = 10 + 20

struct Card : Identifiable, Hashable, Equatable {

    static func == (lhs: Card, rhs: Card) -> Bool {
        lhs.id == rhs.id
    }


    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }

    var id = UUID()

    var intID : Int

    static let cardColors: [Color] = [.orange, .green, .yellow, .purple, .red, .orange, .green, .yellow, .purple]

    var zIndex : Int
    var color : Color
}

class Data: ObservableObject {

    @Published var cards : [Card] = []

    init() {
        for i in 0..= 0) {self.i += 1 } else {self.i -= 1}
                                    self.data.cards.remove(at: index)
                                    self.data.cards.insert(self.card, at:

                                        (self.offset.height >= 0) ?  self.i :  self.i
                                    )


                                    for index in 0..

How to rearrange views in SwiftUI ZStack by dragging

3 Answers