DragGesture on a VStack with lot of Buttons, how to detect when the drag is inside a Button

Question

In UIKit this could be done with code like this:

if button.frame.contains(sender.location(in: rightStackView)) { ... }

but in SwiftUI I can't seem to find anything similar to frame.contains, so how can I find out when the drag is inside a specific button or other view?

Answer 1

Ok, it is a bit a lot of code, so I simplified it as much as possible just to demo possible approach (w/o frame overlapping, dragging relocation, floating drag item, etc.). Moreover it is not clear from the question for what it will be used. Anyway, hope this demo will be useful somehow.

Note: used Xcode 11.2

Here is the result

Here is one module demo code with Preview provider

import SwiftUI

struct DestinationDataKey: PreferenceKey {
    typealias Value = [DestinationData]

    static var defaultValue: [DestinationData] = []
    
    static func reduce(value: inout [DestinationData], nextValue: () -> [DestinationData]) {
        value.append(contentsOf: nextValue())
    }
}

struct DestinationData: Equatable {
    let destination: Int
    let frame: CGRect
}

struct DestinationDataSetter: View {
    let destination: Int
    
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.clear)
                .preference(key: DestinationDataKey.self,
                            value: [DestinationData(destination: self.destination, frame: geometry.frame(in: .global))])
        }
    }
}

struct DestinationView: View {
    @Binding var active: Int
    let label: String
    let id: Int
    
    var body: some View {
        Button(action: {}, label: {
            Text(label).padding(10).background(self.active == id ? Color.red : Color.green)
        })
        .background(DestinationDataSetter(destination: id))
    }
}

struct TestDragging: View {
    @State var active = 0
    @State var destinations: [Int: CGRect] = [:]
    
    var body: some View {
        VStack {
            Text("Drag From Here").padding().background(Color.yellow)
                .gesture(DragGesture(minimumDistance: 0.1, coordinateSpace: .global)
                    .onChanged { value in
                        self.active = 0
                        for (id, frame) in self.destinations {
                            if frame.contains(value.location) {
                                self.active = id
                            }
                        }
                    }
                    .onEnded { value in
                        // do something on drop
                        self.active = 0
                    }
            )
            Divider()
            DestinationView(active: $active, label: "Drag Over Me", id: 1)
        }.onPreferenceChange(DestinationDataKey.self) { preferences in
            for p in preferences {
                self.destinations[p.destination] = p.frame
            }
        }
    }
}

struct TestDragging_Previews: PreviewProvider {
    static var previews: some View {
        TestDragging()
    }
}

backup

Answer 2

This seems pretty close to what you're trying to achieve:
This came from here
(Sorry that this answer hasn't been adapted to your specific situation. I've just been working on something similar and thought I'd share)

struct ContentView: View {
    @State private var frames = [CGRect]()
    @State private var states = [false, false, false]
    
    let values = ["First", "Second", "Third"]

    var body: some View {

        // This came from https://www.youtube.com/watch?v=ffV_fYcFoX0&t=6175s
        HStack {
            ForEach(0 ..< values.count) { index in
                Text(values[index])
                    .overlay(
                        // Creating an overlay creates a view that matches the size of the original view
                        GeometryReader { geo in
                            Color.clear
                                .onAppear {
                                    // Insert that into a state array, and now can access the coordinates of frames
                                    frames.insert((geo.frame(in: .global)), at: 0)
                                }
                        }
                    )
            }
            .gesture(
                DragGesture(minimumDistance: 0, coordinateSpace: .global)
                        .onChanged { value in

                            // If there's a match activate the view by toggling state
                            if let match = frames.firstIndex(where: { $0.contains(value.location) }) {
                                states[match] = true
                            }
                        }
                        .onEnded { _ in
                        }
            )
        }
    }
}