Enable and Disable SwiftUI List rows reordering on a specific row

We can easily enable List row reordering in SwiftUI by attach .onMove modifier to the list content.

struct ReorderExample: View {
    @State private var contacts = [...]

    var body: some View {
        NavigationView {
            List {
                ForEach(contacts, id: \.self) { contact in
                    Text(contact)
                }
                .onMove { from, to in
                    contacts.move(fromOffsets: from, toOffset: to)
                }
            }
            .toolbar {
                EditButton()
            }
        }

    }
}

This will enable item reordering on every row. If you want to prevent some rows from moving, you can do that by using moveDisabled(_:) on that particular row.

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

How to disable item reordering on a specific row

To disable item reordering on a particular row, you might want to add a new property in your data model to dictate that the item can't be moved.

In this case, I create a sticky flag in my model.

struct Contact: Identifiable {
    let id = UUID()
    let name: String
    let sticky: Bool
}

Then mark the item you want to disable reordering by setting sticky to true.

@State private var contacts = [
    Contact(name: "John", sticky: false),
    Contact(name: "Alice", sticky: true),
    Contact(name: "Bob", sticky: true),
    Contact(name: "Foo", sticky: false),
    Contact(name: "Bar", sticky: false)
]

Then inside each row, you use that sticky flag to set .moveDisabled(contact.sticky) modifier.

struct DisableMoveExample: View {
    @State private var contacts = [
        Contact3(name: "John", sticky: false),
        Contact3(name: "Alice", sticky: true),
        Contact3(name: "Bob", sticky: true),
        Contact3(name: "Foo", sticky: false),
        Contact3(name: "Bar", sticky: false)
    ]

    var body: some View {
        NavigationView {
            List {
                ForEach(contacts) { contact in
                    Text(contact.name)
                        .moveDisabled(contact.sticky)
                }.onMove { from, to in
                    contacts.move(fromOffsets: from, toOffset: to)
                }
            }
            .toolbar {
                EditButton()
            }
        }

    }
}

Run the app again, and the rows which have .moveDisabled set to true won't have the drag handler UI.