Drag outside screen issue during drag and drop

I write some code to drag a photo from external app to a rectangle area in my app. I want to achieve an effect that the rectangle changes to semitransparent when the photo is dragged inside the rectangle without release. And then the rectangle changes back to opacity when the photo is dragged outside of the rect area.

I put my app and Photos side by side where my app is on the left side. If I drag the photo in and out from right side, it works good. However, the dropExited method is never called, if I drag the photo out from the left side. The result is the rect stays in semitransparent.

It seems like the drag gesture is considered to cancel automatically INSTEAD of drop exits the area because of touching the screen border. What should I do to reset the rect to opacity in this case?

import SwiftUI



struct ContentView: View {

    @State private var dragIn = false

    var body: some View {

        VStack {

            Rectangle()

                .foregroundColor(.gray)

                .opacity(dragIn ? 0.5 : 1)

        }

        .onDrop(of: [.image], delegate: DropController(dragIn: $dragIn))

    }

}

class DropController: DropDelegate{

    @Binding var dragIn: Bool

    init(dragIn: Binding<Bool>) {

        _dragIn = dragIn

    }

    func dropExited(info: DropInfo) {

        dragIn = false

        print("out")

    }

    func dropUpdated(info: DropInfo) -> DropProposal? {

        dragIn = true

        print("dragging")

        return nil

    }

    func performDrop(info: DropInfo) -> Bool {

        true

    }

}
Drag outside screen issue during drag and drop
 
 
Q