Drag & drop to reorder items in SwiftUI.

Last update: Dec 15, 2022

Related tags

Overview

SwiftUIReorderableForEach

Easily implement drag & drop to reorder items in SwiftUI.

This package contains a generic ReoderableForEach component, which can then be plugged into any layout, such as VStack, LazyVGrid, etc. The end result looks like this:

Features

Supports any Hashable data.
Works with any SwiftUI layout.
Binding to dynamically enable/disable reordering functionality.
Custom item rendering with additional info on if the current item is being dragged or not.

Installation

This component is distrubuted as a Swift package. Just add this URL to your package list:

https://github.com/globulus/swiftui-reorderable-foreach

You can also use CocoaPods:

pod 'SwiftUIReorderableForEach', '~> 1.0.0'

Sample usage

VStack

struct ReorderingVStackTest: View {
  @State private var data = ["Apple", "Orange", "Banana", "Lemon", "Tangerine"]
  @State private var allowReordering = false
  
  var body: some View {
    VStack {
      Toggle("Allow reordering", isOn: $allowReordering)
        .frame(width: 200)
        .padding(.bottom, 30)
      VStack {
        ReorderableForEach($data, allowReordering: $allowReordering) { item, isDragged in
          Text(item)
            .font(.title)
            .padding()
            .frame(minWidth: 200, minHeight: 50)
            .border(Color.blue)
            .background(Color.red.opacity(0.9))
            .overlay(isDragged ? Color.white.opacity(0.6) : Color.clear)
        }
      }
    }
  }
}

LazyVGrid

struct ReorderingVGridTest: View {
  @State private var data = ["Apple", "Orange", "Banana", "Lemon", "Tangerine"]
  @State private var allowReordering = false
  
  var body: some View {
    VStack {
      Toggle("Allow reordering", isOn: $allowReordering)
        .frame(width: 200)
        .padding(.bottom, 30)
      LazyVGrid(columns: [
        GridItem(.flexible()),
        GridItem(.flexible())
      ]) {
        ReorderableForEach($data, allowReordering: $allowReordering) { item, isDragged in
          Text(item)
            .font(.title)
            .padding()
            .frame(minWidth: 150, minHeight: 50)
            .border(Color.blue)
            .background(Color.red.opacity(0.9))
            .overlay(isDragged ? Color.white.opacity(0.6) : Color.clear)
        }
      }
    }
    .padding()
  }
}

Recipe

Check out this recipe for in-depth description of the component and its code. Check out SwiftUIRecipes.com for more SwiftUI recipes!

Changelog

1.0.0 - Initial release.

You might also like...

SwiftUI Grid layout with custom styles

SwiftUI Grid SwiftUI Grid view layout with custom styles. Features ZStack based layout Vertical and horizontal scrolling Supports all apple platforms

928 Dec 15, 2022

A grid layout view for SwiftUI

Update July 2020 - latest SwiftUI now has built-in components to do this, which should be used instead. FlowStack FlowStack is a SwiftUI component for

147 Nov 10, 2022

Horizontal and Vertical collection view for infinite scrolling that was designed to be used in SwiftUI

InfiniteScroller Example struct ContentView: View { @State var selected: Int = 1 var body: some View { InfiniteScroller(direction: .ve

5 Apr 17, 2022

SwiftUI 2.0 Cheat Sheet

SwiftUI 2.0 Cheat Sheet Table of Contents SwiftUI Cheat Sheet Table of Contents Resource UIKit equivalent in SwiftUI View Text Label TextEditor Image

3.8k Dec 26, 2022

`SwiftUI` Framework Learning and Usage Guide. 🚀

This article refers to SwiftUI apple example and records the results of the exploration here, I hope to be helpful to you. For the content described i

4.5k Jan 4, 2023

GridExample - SwiftUI example working with grids

Working with SwiftUI grids LazyVGrid does not have a column span feature. This t

2 Dec 27, 2022

LinkedIn-Profile - UI of Android LinkedIn App Profile Page in iOS SwiftUI

LinkedIn-Profile UI of Android LinkedIn App Profile Page in iOS SwiftUI Sample I

0 Feb 4, 2022

SwiftUI views that arrange their children in a flow layout.

SwiftUI Flow SwiftUI views that arrange their children in a flow layout. HFlow A view that arranges its children in a horizontal flow. Usage ScrollVie