How to use drag and drop gesture in SwiftUI? - swift

Question

I am trying to make a program by using SwiftUI in which you can just drag a bunch of squares along. Here, there are two squares namely X and Y.
Everything works fine until you drag the squares along. After you drag and drop the first square the second square immediately follows it. I am not sure why this happens. I tried making every single constant and variable in these squares different but still after you drag and drop one of the squares the second just follows along.
My code is:
struct DemoSceneKit: View {
enum DragState {
case inactive
case pressing
case dragging(translation: CGSize)
case dragging2(translation2: CGSize)
var translation: CGSize {
switch self {
case .inactive, .pressing, .dragging2:
return .zero
case .dragging(let translation):
return translation
}
}
var translation2: CGSize {
switch self {
case .inactive, .pressing, .dragging:
return .zero
case .dragging2(let translation2):
return translation2
}
}
var isActive: Bool {
switch self {
case .inactive:
return false
case .pressing, .dragging, .dragging2:
return true
}
}
var isDragging: Bool {
switch self {
case .inactive, .pressing:
return false
case .dragging, .dragging2:
return true
}
}
}
#GestureState var dragState2 = DragState.inactive
#GestureState var dragState = DragState.inactive
#State var viewState = CGSize.zero
var body: some View {
//First Square
let minimumLongPressDuration = 0.2
let longPressDrag = LongPressGesture(minimumDuration: minimumLongPressDuration)
.sequenced(before: DragGesture())
.updating($dragState) { value, state, transaction in
switch value {
// Long press begins.
case .first(true):
state = .pressing
// Long press confirmed, dragging may begin.
case .second(true, let drag):
state = .dragging(translation: drag?.translation ?? .zero)
// Dragging ended or the long press cancelled.
default:
state = .inactive
}
}
.onEnded { value in
guard case .second(true, let drag?) = value else { return }
self.viewState.width += drag.translation.width
self.viewState.height += drag.translation.height
}
//Second square
let longPressDrag2 = LongPressGesture(minimumDuration: minimumLongPressDuration)
.sequenced(before: DragGesture())
.updating($dragState2) { value, state, transaction in
switch value {
// Long press begins.
case .first(true):
state = .pressing
// Long press confirmed, dragging may begin.
case .second(true, let drag2):
state = .dragging2(translation2: drag2?.translation ?? .zero)
// Dragging ended or the long press cancelled.
default:
state = .inactive
}
}
.onEnded { value in
guard case .second(true, let drag2?) = value else { return }
self.viewState.width += drag2.translation.width
self.viewState.height += drag2.translation.height
}
return
ZStack{
// First Square
Rectangle()
.stroke(Color.white, lineWidth: 5)
.frame(width: 100, height: 100)
.offset(
x: viewState.width + dragState.translation.width,
y: viewState.height + dragState.translation.height
)
.gesture(longPressDrag)
Text("X")
.offset(x: viewState.width + dragState.translation.width,
y: viewState.height + dragState.translation.height
)
.gesture(longPressDrag)
.frame(width:200, height: 200)
// Second Square
ZStack{
Rectangle()
.stroke(Color.blue, lineWidth: 5)
.frame(width: 100, height: 100)
.position(x: 350, y: 300)
.offset(
x: viewState.width + dragState2.translation.width,
y: viewState.height + dragState2.translation.height
)
.gesture(longPressDrag2)
Text("Y")
.offset(x: viewState.width + dragState2.translation.width,
y: viewState.height + dragState2.translation.height
)
.gesture(longPressDrag2)
.frame(width:400, height: 300)
.position(x: 350, y: 300)
}
}
}
}
Please help me with this code.