如何在SwiftUI中使用拖放手势？

Question

我正在尝试使用SwiftUI制作一个程序，您可以在其中拖曳一堆正方形。在这里，有两个正方形，即X和Y。

一切正常，直到您拖动正方形。拖放第一个正方形后，第二个正方形立即跟随它。我不知道为什么会这样。我尝试使这些正方形中的每个常数和变量都不同，但是仍然需要在拖放其中一个正方形之后，紧跟着第二个正方形。

我的代码是：

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)
                }
        }
    }
}

请帮助我提供此代码。