I am new to swiftui and have been trying create a horizontal image bar (that already works), but with it I want to be able to drag and drop those images unto the screen (basically copy them), but not on a grid (so freely moving around).

I have been looking at code, but all of them seems to be used on Lists, and I don't use a list.

This is the code I am using, any advise would be helpfull.

import SwiftUI

struct Instrument: Identifiable {
    let id = UUID()
    let name: String
    let image: String
}

struct StageView: View {
    @State private var instruments = [
        Instrument(name: "Drums", image: "drums"),
        Instrument(name: "Percussion", image: "drums"),
        Instrument(name: "Synthesizer", image: "synthesizer"),
        Instrument(name: "Piano", image: "piano"),
        Instrument(name: "El-Guitar", image: "el-git"),
        Instrument(name: "Acc-Guitar", image: "acc-guitar"),
        Instrument(name: "Bass-Guitar", image: "drums"),
        Instrument(name: "Trumpet", image: "trumpet"),
        Instrument(name: "Trombone", image: "trombone"),
        Instrument(name: "Violin", image: "violin"),
        Instrument(name: "Flute", image: "flute"),
        Instrument(name: "Harp", image: "harp"),
        Instrument(name: "Oboe", image: "oboe"),
        Instrument(name: "Saxophone", image: "saxophone"),
    ]

    var body: some View {
        VStack {
            Divider()
            ScrollView(.horizontal) {
                HStack(spacing: 5) {
                    ForEach(instruments) { instrument in
                        RectangleView(label: instrument.name, image: instrument.image)
                    }
                }.padding()
            }.frame(height: 70)
            Divider()
            Spacer()
            HStack {
                Text("The content of the Home view")
            }
            Spacer()
        }
    }
}

struct RectangleView: View {
    @State var label: String
    @State var image: String

    var body: some View {
        ZStack {
            HStack {
            Image(image)
                .resizable()
                .border(Color.gray, width: 1)
                .frame(width: 140, height: 70)
            }
            VStack {
                Spacer()
                Text(label)
                    .padding(.leading, 5)
                    .padding(.trailing, 5)
                    .background(Color.white)
            }
        }
    }
}

struct StageView_Previews: PreviewProvider {
    static var previews: some View {
        StageView()
.previewInterfaceOrientation(.landscapeLeft)
    }
}

I quickly found an article @twostraws wrote about Drag and Drop.

Please review this article and let us know what you don't understand.

Drag and Drop

To be honest, I don't see any code in your snips involving drag and drop. I think we're all happy to help. But it doesn't seem you taken any steps towards implementing drag and drop. What am I missing here?

Hi @Obelix, thansk for your reply. I have been reading about drag and drop, but it does only seem involve drag and drop files from other programs into the app or between lists/tables (as you mentioned in the link you posted).

Below is a screenshot of what I have sofar. What I try to do is when I drag one of the instruments to the white area of the screen, it creates a copy of the instrument (keeping the original at the top) and dropping the copy on the location I placed the mouse.

Have you met the other SwiftUI teacher named Paul?

Paul Hegarty teaches SwiftUI programming at Stanford University. Use the google and seek wisdom about CS193p !

In lectures 9 and 10 of his Spring 2021 course, Professor Hegarty writes an application named EmojiArt. This application introduces a number of great topics, extensions, enums, tuples, and more!

But to the point, his application sets up a palate of icons, very similar to your instruments. Then when you tap an icon, you're able to drag it out into a large scene. In lecture 10, Professor Hegarty adds multi-touch gestures allowing you to zoom in and pan around your art document.

Also, one of these lectures allows you to rearrange the icons within the icon palette. Perhaps you want to move the harpsichord before the castinets. Or you want to drag the contrabassoon to sit next to the well tempered clavier.

If this helps, you must revisit these forums and let us know how your application is progressing!

Click to visit: CS193p Spring 2020