SwiftUI provides a simple and elegant way to implement lists with the List view. But sometimes, we need to add some extra functionality to make our lists more interactive. One such functionality is "drag-and-drop" reordering of list items.
In this blog post, we will learn how to implement drag-and-drop reordering in a SwiftUI List using the onMove modifier. Let's get started!
The code in this post is available here.
Step 1: Create a List with data
First, let's create a simple list with some data. For this example, we will create a list of colors.
struct ContentView: View {
@State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]
var body: some View {
List {
ForEach(colors, id: \.self) { color in
Text(color)
}
}
}
}
Step 2: Add onMove modifier
Now, we need to add the onMove modifier to the List view to enable drag and drop reordering. The onMove modifier is called when the user initiates a drag on a list item. We can then update the data source with the new order.
struct ContentView: View {
@State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]
var body: some View {
List {
ForEach(colors, id: \.self) { color in
Text(color)
}
.onMove(perform: move)
}
}
private func move(from source: IndexSet, to destination: Int) {
colors.move(fromOffsets: source, toOffset: destination)
}
}
Step 3: Add reordering handle
Finally, we can add a reordering handle to the list items to make it more clear to the user that the items can be reordered. We can use the move button provided by SwiftUI.
struct ContentView: View {
@State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]
var body: some View {
List {
ForEach(colors, id: \.self) { color in
Text(color)
}
.onMove(perform: move)
}
.onAppear {
UITableView.appearance().isEditing = true
}
}
private func move(from source: IndexSet, to destination: Int) {
colors.move(fromOffsets: source, toOffset: destination)
}
}
We also need to set the UITableView's isEditing property to true in order to enable the reordering handles.
And that's it! With just a few lines of code, we have added drag-and-drop reordering to our SwiftUI List.
Note: If you find it difficult to drop the item while testing this functionality in the Preview Canvas, try to update the .app file by placing the ContentView inside it and drag-and-drop an item in the Xcode Simulator.
Conclusion
In this blog post, we learned how to implement drag-and-drop reordering in a SwiftUI List using the onMove modifier. We also added a reordering handle to make it more clear to the user that the items can be reordered. SwiftUI provides a simple and elegant way to implement complex functionality like this, making it easy to create great user experiences.
And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.
I’ll see you in the next post!
