Thank you for responding to my question. Below is a simplified code example that displays two SF Symbol images on a Grid View, as seen in the gif. I've included a basic DragGesture but I have a feeling it isn't the right approach. In order for it to work the onEnded closure would need to somehow map the offset coordinate into a Square enum case so that I could update the ModelState. I intend for the board and pieces to scale to fit the available space so the size of the squares won't be known beforehand, making the coordinate mapping difficult. Maybe **GeometryReader ** could solve that but I could see the code becoming a mess. I see other drag and drop methods in the documentation, surely one them is designed to better fit this use case. dropDestination seems like a suitable candidate but I think read somewhere that it doesn't work with SF Symbols. I'm looking for guidance from someone familiar with Apple's documentation because they provide little explanations themselves (I've watched WWDC videos). Also there appears to be a clipping issue with the DragGesture within the Grid, changing the zindex of the images didn't fix that for me.
enum Square: Int { case a, b, c, d }
struct PieceView: View {
@State var offset: CGSize = .zero
var drag: some Gesture {
DragGesture()
.onChanged { value in offset = value.translation }
.onEnded{ value in offset = .zero }
}
var body: some View {
Image(systemName: "circle.fill")
.resizable().scaledToFit()
.foregroundColor(.black)
.offset(offset)
.gesture(drag)
}
}
struct SquareView: View {
let color: Color
let square: Square
@ObservedObject var state: ModelState
var body: some View {
color.overlay(state.pieces[square])
}
}
class ModelState: ObservableObject {
@Published var pieces: [Square: PieceView] = [.a: PieceView(), .b: PieceView()]
}
struct BoardView: View {
@StateObject var state: ModelState = ModelState()
var body: some View {
Grid {
ForEach(0..<2, id: \.self) { row in
GridRow {
ForEach(0..<2, id: \.self) { column in
SquareView(
color: (row + column).isMultiple(of: 2) ? Color(.cyan) : Color(.white),
square: Square(rawValue: 2*row + column)!,
state: state
)
}
}
}
}
}
}
