Drag and Drop in Nested List

Question

Created Nov ’23

Replies 1

Boosts 0

Participants 1

Does anyone KNOW if SwiftUI now supports drag and drop in a list? It seems like it was only working in ForEach before the latest version. Now, this tries to work, but hangs.

    List(sidebars.sorted{$0.index < $1.index}[0].children!, id:\.id, children: \.children, selection: $selected) { sidebar in
            NavigationLink {
                      SidebarDetailSelectorView(sidebar: sidebar)
             } label: {
                      rowLabel(sidebar: sidebar)
                      //.background(Color.random())
              }
               .onChange(of: selected) {
                        currentSidebar.sidebar = sidebars.first{ $0.id == selected }
                        currentSidebar.editSidebar = currentSidebar.sidebar
               }
                .draggable(sidebar)
                .dropDestination(for: Sidebar.self) { sidebars, location in
                        print("\(sidebars[0].title) -> \(sidebar.title)")
                        return true
               }
       }

I want a hierarchical sidebar (like finder or mail) to be able to drag and drop within the list to reorder it. I can get it working with DisclosureGroups. The parent items can be dragged or dropped on but are not selectable - which I need. Here is an example of my recursive DisclusureGroup implementation using ForEach loops.

struct MenuItemView: View {
    let item: MenuItem
    
    var body: some View {
        if let children = item.children, children.isEmpty == false {
            DisclosureGroup(item.text) {
                ForEach(children, id: \.id) { childItem in
                    MenuItemView(item: childItem)
                        .draggable(childItem)
                        .dropDestination(for: MenuItem.self) { items, location in
                            print("\(items[0].text) -> \(childItem.text)")
                            return true
                        } isTargeted: { isTargeted in
                            item.isTargeted = isTargeted
                        }
                }
            }
        } else {
            VStack {
                NavigationLink(item.text, destination: Text(item.text))
                    .foregroundColor(item.isTargeted ? .teal : Color(.selectedTextColor ))
                    .draggable(item)
                    .dropDestination(for: MenuItem.self) { items, location in
                        print("\(items[0].text) -> \(item.text)")
                        return true
                    } isTargeted: { isTargeted in
                        item.isTargeted = isTargeted
                    }
            }
        }
    }
}

Boost

Answer 1

franc OP

Nov ’23

Okay, well, ahem.

I got this to work with a List. I always understood that would not work, that I would have to use ForEach to access the hierarchical sidebar list I need by using a list.

The issue was my Model data class (Sidebar) gave it indigestion. There were NO error messages; there was NO crash. It simply hung. No memory leaks, and I could find nowhere to place a breakpoint - it was basically contemplating its the navel.

I finally fixed it by dragging only the sidebar.id (a uuidString) and then doing an "if let sidebar = sidebars. first(where: {$0.id == items[0]}) { print(sidebar.title) }" in the destination.

Here is my List for those who might be struggling with doing this:

List(sidebars.sorted{$0.index < $1.index}[0].children!, id:\.id, children: \.children, selection: $selected) { sidebar in
    NavigationLink {
        SidebarDetailSelectorView(sidebar: sidebar)
    } label: {
        rowLabel(sidebar: sidebar)
        //.background(Color.random())
    }
    .onChange(of: selected) {
        current.sidebar = sidebars.first{ $0.id == selected }
    }
    .draggable(sidebar.id)
    .dropDestination(for: UUID.self) { items, location in
        if let sidebar = sidebars.first(where: {$0.id == items[0]}) {
            print(sidebar.title)
            // do magic here...
        }
        return true
    } isTargeted: { isTargeted in
        sidebar.isTargeted = isTargeted
    }
}

0