How to Reorder List rows in SwiftUI

SwiftUI provides a powerful and easy-to-use API for building lists of items that can be reordered by the user. In this blog post, we’ll learn how to create a list of items that can be reordered using the built-in .onMove() modifier.

To get started, let’s create a simple list of strings that we’ll use as our data source:

@State var data = ["Item 1", "Item 2", "Item 3", "Item 4"]

Next, we’ll create a List and bind it to our data source using the ForEach view:

List {
    ForEach(data, id: \.self) { item in
        Text(item)
    }
}

This will create a simple list of items that can’t be reordered by the user. To enable reordering, we’ll need to add the .onMove() modifier to our ForEach view:

List {
    ForEach(data, id: \.self, content: { item in
        Text(item)
    }).onMove { (source: IndexSet, destination: Int) in
        // Code to reorder the items goes here
    }
}

The .onMove() modifier takes a closure that is called whenever the user tries to reorder an item. The closure receives two arguments: source and destination. The source argument is an IndexSet that contains the index of the item being moved, and the destination argument is an integer representing the destination index of the moved item.

To actually reorder the items, we’ll need to update our data source and apply the changes to the list. One way to do this is to use the move() method of the MutableCollection protocol.

The onMove‘s closure takes two arguments, an IndexSet of moving items and a new destination position in Int.

List {
    ForEach(data, id: \.self, content: { item in
        Text(item)
    }).onMove { (source: IndexSet, destination: Int) in
        data.move(fromOffsets: source, toOffset: destination)
    }
}

This will allow the user to reorder the items in the list by dragging them to the desired position.

There are a few things to keep in mind when using the .onMove() modifier:

• The id parameter of the ForEach view must be set to a unique identifier for each item in the data source. This is necessary to ensure that the list is correctly updated when items are moved.
• The .onMove() modifier is only available for ForEach views that are inside a List view.
• The .onMove() modifier doesn’t automatically add a “reorder” handle to the items in the list. To provide a visual indication that the items can be reordered, you can use the editmode environment on the list:

// Full Code

struct ContentView: View {
    @State var data = ["Item 1", "Item 2", "Item 3", "Item 4"]
    var body: some View {
        VStack {
            List {
                ForEach(data, id: \.self, content: { item in
                    Text(item)
                }).onMove { (source: IndexSet, destination: Int) in
                    data.move(fromOffsets: source, toOffset: destination)
                }
            }.environment(\.editMode, .constant(.active))
        }
        .padding()
    }
}

✍️ Written by Ishtiak Ahmed

👉 Follow me on X ● LinkedIn

---

Get Ready to Shine: Mastering the iOS Interview

• Ace iOS Coding Interview
• Uplift iOS Interview - A Comprehensive Guide to iOS Interview

---

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.