Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI Drag and Drop with a list

Do you know how I can achieve a drag and drop result like in the "reminders" app from Apple using SwiftUI? If not, how could I do a UIViewRepresentable (from UIKit) for a Drag and Drop feature with UIKit for SwiftUI?

Please see the picture below.

Any suggestions would be greatly appreciated.

enter image description here

like image 268
Nighthawk Avatar asked Mar 18 '21 23:03

Nighthawk


People also ask

How do I make an editable list in SwiftUI?

If you have configured a SwiftUI list view to support deletion or editing of its items, you can allow the user to toggle editing mode for your list view by adding an EditButton somewhere. When that is run, you'll find you can tap the edit button to enable or disable editing mode for the items in the list.

Is SwiftUI drag and drop?

SwiftUI provides first-class support for drag and drop in the List collection, as well as the API for any view to support drag and drop.

Where should you provide drag and drop in SwiftUI?

You should provide drag and drop wherever you’d expect to be able to move an object. SwiftUI provides first-class support for drag and drop in the List collection, as well as the API for any view to support drag and drop.

How do I add a list to a SwiftUI app?

Use a SwiftUI List view to add the ability to edit a list to an app called Drag Todo. Give the app drag-and-drop support by adding a custom class. See the trade-offs and decisions you’ll need to make when you use both functionalities. Note: This tutorial assumes you are familiar with the basics of SwiftUI List and ForEach views.

What is drag and drop interaction in iOS?

Drag and drop interactions allow users to send data between two apps or two scenes of the same app. For example, you can run Safari and Notes apps side-by-side and drag the links from Safari to Notes app. As part of the post, we will build a bookmarking app that uses drag and drop to save or open links stored in the app.

How do I tell SwiftUI if a view accepts drops?

For the drop part, SwiftUI has a modifier called onDrop (). With this method, we tell SwiftUI if a view accepts drops, what types of items can be dropped, plus some other useful information. Depending on what you need, there are three versions of the modifier you can choose:


Video Answer


2 Answers

This tutorial has everything you need and it is very easy to follow up. (As a side note, SwiftUI makes it indeed easy as opposed to how one has to do it in UIKit).

https://www.vadimbulavin.com/add-edit-move-and-drag-and-drop-in-swiftui-list/

Update: I add some explanations on how to resolve the issue.

Steps:

  1. Add a handler for .onInsert() on your list,
  2. Implement that handler.

The handler signature is (Int, [NSItemProvider]), which provides you the index where the dragged object is dropped, and itemProviders which provide you with info on what has been dropped.

struct EditListView: View {
   @State private var items: [Item] = [
      Item(title: "Apple"),
      Item(title: "Banana"),
      Item(title: "Papaya"),
      Item(title: "Mango")
   ]
   
   var body: some View {
      NavigationView{
         List {
            ForEach(
               items,
               id: \.self
            ) { item in
               Text(item.title)
            }
            .onInsert(of: [String(kUTTypeURL)], perform: onInsert)
         }
         .navigationTitle("Fruits")

      }
   }
   
   private func onInsert(at offset: Int, itemProvider: [NSItemProvider]) {
      for provider in itemProvider {
        // check if object is of URL type 
         if provider.canLoadObject(ofClass: URL.self) {
            // load the object and add it on screen
            _ = provider.loadObject(ofClass: URL.self) { url, error in
               DispatchQueue.main.async {
                  url.map { self.items.insert(Item(title: $0.absoluteString), at: offset) }
               }
            }
         }
      }
   }
   
}
like image 113
Sardorbek Ruzmatov Avatar answered Oct 19 '22 20:10

Sardorbek Ruzmatov


So far there is not really a boot in method to drag and drop. The .onDrag modifier really only seems to work on the iPad. My suggestion is that you use a UIViewRepresentable and make a table view (UI kit) and then implement the drag and drop from there.

like image 1
Red Lion Avatar answered Oct 19 '22 18:10

Red Lion