SwiftUI - Drag and Drop

SwiftUI provides a special feature known as drag and drop. The drag and drop allows the user to move any item or content from one part or location of the app and drop it to another part or location of the app. Or we are allowed to drag content from one app and drop it to another app. It can drag and drop data, images, text, or other content given in the view.

It is useful in apps like image galleries, file organizers, notes, etc. This feature is available in iOS, iPadOS, and macOS. Apart from the content we can also move, rearrange, reorder or transfer objects such as UI elements or UIViews from different parts of the app by dragging and dropping them.

Drag and Drop using Transferable Items

In SwiftUI, we can drag and drop items with the help of a Transferable protocol. It is the simplest protocol to move elements between the given views. It provides two modifiers; .draggable() and .dropDestination to drag and drop elements from one view to another.

.draggable() Modifier

The .draggable() modifier allows us to perform drag and drop operations in the specified view. This modifier conforms to the Transferable protocol. It allows the user to drag the view using a gesture and it will automatically perform drag internally. We can also combine this modifier with DragGesture() to get more control over the view while dragging.

Syntax

Following is the syntax −

.draggable(_payload: @autoclosure)

Parameter

It takes only one parameter which is the payload. It is a closure which represents the draggable data from the view.

.dropDestination() Modifier

The .dropDestination() modifier specifies the destination of the dropped content. Or we can say that it allows us to specify the location in the view hierarchy where we can drop the draggable items.

Syntax

Following is the syntax −

.dropDestination(
   for payloadType: Type,
   action: @escapingClosure,
   isTargeted: @escapingClosure
)

Parameter

• for: Represent the view which we want to drop.

• action: Represent a closure which takes a dropped element and responds accordingly. It will return true if the drag operation is successful, else it will return false.

• isTargeted: Represent a closure which is called when the drag and drop operation enters into the targeted location. It will return true if the cursor is in the specified area, else return false.

Example

The following SwiftUI program to used to perform drag and drop using Transferable Items.

import SwiftUI

struct ContentView: View {
   @State private var language: [String] = ["Java", "C++", "Python", "Go"]
   @State private var dropIcon = Image(systemName: "square.and.arrow.down")

   var body: some View {
      VStack {
         HStack {
            ForEach(language, id: \.self) { x in
               Text(x)
                  .frame(minWidth: 50, minHeight: 50)
                  .background(.white)
                  .foregroundStyle(.pink)
                  .cornerRadius(10)
                  .draggable(x)
            }
         }
         .frame(minWidth: 250, minHeight: 70)
         .cornerRadius(10)

         Text("Drop favorite language here:")

         dropIcon
            .frame(width: 200, height: 150)
            .background(.yellow.opacity(0.4))
            .foregroundStyle(.white)
            .dropDestination(for: Image.self) { 
               x, loc in
               dropIcon = x.first ?? Image(systemName: "square.and.arrow.down")
               print(loc)
               return true
            }
      }
   }
}
#Preview {
   ContentView()
}

Output