Drag and drop in list with SwiftUI

Generated on 8/3/2024

1 search

To implement drag and drop in a list with SwiftUI, you can use the onDrag and onDrop modifiers. These modifiers help you create accessible drag and drop experiences. Here are some relevant details from the WWDC sessions:

  1. Drag and Drop Accessibility:

    • In the session Catch up on accessibility in SwiftUI, it is mentioned that drag and drop are supported with accessibility technologies like VoiceOver and Voice Control. You can use the onDrag and onDrop modifiers to enhance the experience for your app. For example, you can define multiple drop points on a single view using a custom drop delegate.
  2. List Customization:

    • In the session SwiftUI essentials, it is explained how lists can be customized through view modifiers. This includes adding swipe actions to each row, which can be combined with drag and drop functionality to create a more interactive list.
  3. Drop Destinations on Tabs:

    • In the session Elevate your tab and sidebar experience in iPadOS, it is discussed how tabs can be drop destinations. This allows for direct additions into tabs in the sidebar or tab bar through drag and drop, using the dropDestination modifier.

Here is a simple example of how you might implement drag and drop in a SwiftUI list:

struct DraggableItem: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    @State private var items = [
        DraggableItem(name: "Item 1"),
        DraggableItem(name: "Item 2"),
        DraggableItem(name: "Item 3")
    ]
    
    var body: some View {
        List {
            ForEach(items) { item in
                Text(item.name)
                    .onDrag {
                        NSItemProvider(object: item.name as NSString)
                    }
                    .onDrop(of: [UTType.text], delegate: DropViewDelegate(item: item, items: $items))
            }
        }
    }
}

struct DropViewDelegate: DropDelegate {
    let item: DraggableItem
    @Binding var items: [DraggableItem]
    
    func performDrop(info: DropInfo) -> Bool {
        // Handle the drop logic here
        return true
    }
}

This example demonstrates how to make list items draggable and how to handle drop actions using a custom drop delegate. For more detailed information, you can refer to the sessions mentioned above.

SwiftUI essentials

SwiftUI essentials

Join us on a tour of SwiftUI, Apple’s declarative user interface framework. Learn essential concepts for building apps in SwiftUI, like views, state variables, and layout. Discover the breadth of APIs for building fully featured experiences and crafting unique custom components. Whether you’re brand new to SwiftUI or an experienced developer, you’ll learn how to take advantage of what SwiftUI has to offer when building great apps.

What’s new in UIKit

What’s new in UIKit

Explore everything new in UIKit, including tab and document launch experiences, transitions, and text and input changes. We’ll also discuss better-than-ever interoperability between UIKit and SwiftUI animations and gestures, as well as general improvements throughout UIKit.

Migrate your TVML app to SwiftUI

Migrate your TVML app to SwiftUI

SwiftUI helps you build great apps on all Apple platforms and is the preferred toolkit for bringing your content into the living room with tvOS 18. Learn how to use SwiftUI to create familiar layouts and controls from TVMLKit, and get tips and best practices.

Catch up on accessibility in SwiftUI

Catch up on accessibility in SwiftUI

SwiftUI makes it easy to build amazing experiences that are accessible to everyone. We’ll discover how assistive technologies understand and navigate your app through the rich accessibility elements provided by SwiftUI. We’ll also discuss how you can further customize these experiences by providing more information about your app’s content and interactions by using accessibility modifiers.

Elevate your tab and sidebar experience in iPadOS

Elevate your tab and sidebar experience in iPadOS

iPadOS 18 introduces a new navigation system that gives people the flexibility to choose between using a tab bar or sidebar. The newly redesigned tab bar provides more space for content and other functionality. Learn how to use SwiftUI and UIKit to enable customization features – like adding, removing and reordering tabs – to enable a more personal touch in your app.

Demystify SwiftUI containers

Demystify SwiftUI containers

Learn about the capabilities of SwiftUI container views and build a mental model for how subviews are managed by their containers. Leverage new APIs to build your own custom containers, create modifiers to customize container content, and give your containers that extra polish that helps your apps stand out.