hello there is an object in scrollview. When doing Drag Gesture, it doesn't go out of scrollview. I set up zindex but it doesn't work. How can I move Text to the red area that appears in the picture?

struct SwiftUIView2: View {
    @State private var dragAmount = CGSize.zero

    var body: some View {
        VStack{

            GeometryReader { geo in
                ScrollView() {
                    ScrollViewReader { reader in
                        Text("Hello, World!")
                            .background(Color.yellow)
                            .offset(dragAmount)
                            .gesture(
                                DragGesture(minimumDistance: 0, coordinateSpace: .global)
                                    .onChanged { value in
                                        self.dragAmount = CGSize(width: value.translation.width, height: value.translation.height)
                                    }
                                    .onEnded { value in
                                        self.dragAmount = .zero
                                    }
                            )
                    }
                }
            }
            .background(Color.blue)
            .frame(width: 222, height: 100)
            .zIndex(1)

            Color.red
                .frame(width: 222, height: 100)
                .zIndex(0)

        }
    }
}

Just to remind anyone, in SwiftUI VStack, ZStack, Text and Colors are views, and view modifiers stack up, so the order is important.

The text is on the default zIndex(0), so needs to be on the higher priority zIndex(1) for it to be above the red rectangle and blue background.

Not sure if this is what you intended. I have kept some of your original code in place for reference, and commented it out. The red rectangle has been replaced in this version, so that it is in the same VStack as the Text

@State private var dragAmount = CGSize.zero

    var body: some View {
        VStack{

            GeometryReader { geo in
                ScrollView() {
                    ScrollViewReader { reader in
                        Text("Hello, World!")
                            .background(Color.yellow)
                            .offset(dragAmount)
                            .gesture(
                                DragGesture(minimumDistance: 0, coordinateSpace: .global)
                                    .onChanged { value in
                                        self.dragAmount = CGSize(width: value.translation.width, height: value.translation.height)
                                    }
                                    .onEnded { value in
                                        self.dragAmount = .zero
                                    }
                            )
                            .zIndex(1)

                        Rectangle()
                            .size(width: 222, height: 100)
                            .offset(x: 0, y: 70)
                            .fill(Color.red)
                    }
                }
            }
            .background(Color.blue)
            .frame(width: 222, height: 200)
//            .zIndex(1)

//                Color.red
//                    .frame(width: 222, height: 100)
//                    .zIndex(0)

        }
    }
}

Sorry, I can't put the red field in scrollview. I shortened the code for clarity. I'm taking a screenshot now. I have to move the letters on the table back to the rack, but it just doesn't work. it always stays under the rack.