SwiftUI Drag and Drop with Transferable Custom Object

[@seanallen]

Go deeper into SwiftUI and UIKit with my iOS Developer courses at seanallen.teachable.com

[@blytte]

Man, thank you for existing, you keep saving my life, currently, I'm unemployed so every dime counts, but as soon as I manage to get a job in swiftUI I want to become a member of your channel and recommend it to every single person ill know.

[@seanallen]

I appreciate that. Happy my channel is helpful for ya

[@StewartLynch]

Pretty much the perfect video Sean. So well explained as usual

[@seanallen]

I appreciate that. Means a lot coming from you, Stewart.

[@gilbertgonsalves9815]

Clearest example of implementation of Transferable Protocol I've seen. Thanks.

[@FIightAviator]

Great Tutorial! Could you make a tutorial with this but you add a + button which adds a block that you can drag?

[@AK907]

Been waiting for this video for a long time! Thank you. Just purchased the widget course as well.

[@seanallen]

Glad you liked the video and hope you enjoy the Widgets course. That's a fun one.

[@soheilpakgohar6630]

My life is divided into 2 parts, before and after this tutorial

[@seanallen]

Lol, glad you liked it.

[@sl1ck64]

Does anyone else have a bug with the preview of the drag not disappearing properly with iOS 18?

[@istvansipos3121]

Yes, having the same problem and couldn't find a workaround. The same code works fine on iOS 17.

[@chrispy104k]

Great tutorial Sean. Drag and Drop has always been a bit of a mystery to me. Cheers man.

[@seanallen]

Happy to help!

[@alexl2512]

Sean, thank you very much. I have a question which goes deeper. extension ImageDocumentLayer: Transferable { static var transferRepresentation: some TransferRepresentation { DataRepresentation(contentType: .layer) { layer in layer.data() } importing: { data in try ImageDocumentLayer(data: data) } DataRepresentation(exportedContentType: .png) { layer in layer.pngData() } } } This is code is on Apple Official Doc. This transferRepresentation consists of two DataRepresentation. They are async throw functions. Why transferRepresentation itself doesn't have the key word async or throws?

[@payalmalekar6529]

Hi Sean, Thank you for the video. I have tried this tutorial but my preview view is going on somewhere middle of the view after dropping item. Can you please me on why it's behaving like this. tried on both iOS and VisionOS simulator. Thanks in advance.

[@Sengardisback]

Would love to see the next video from your „built ship provit“ series. How is it going with creator view?

[@seanallen]

I wanted to get that out this week, but it's looking like next week. I'm working on the next release and will do a video after I ship that.

[@rahuljamba5846]

Great Allen Thanks for sharing your knowledge !!

[@seanallen]

No problem :)

[@zykis999]

First of all, thanks for in-depth guide. Helped a lot to understand a topic. I have a question thought: is there any way to tweak drag gesture parameters? I have a huge delay, trying to drag an item, that is inside a ScrollView - would like to reduce it

[@JackCSwift]

Great tutorial, as usual. However, I rebuilt this with Mac as target and the .dropDestination doesn't work. I can drag the Text but the Kanban doesn't light up. Any ideas why? Same exact code works fine on iPad target.

[@matthewbrignola5510]

Is there I can make a way to make an element containing multiple other elements draggable? I have a complex reusable component with multiple textfields in it that I want to be able to click and drag the entire set of textfields within the main view.

[@catsCollection]

it works on iOS but on macOS it is being dragged but not accepting it to be dropped, please help

[@chuckincharlie]

Has anybody tried this? I haven't gotten it to work. Did Apple break this? I can get a list Item to drag but I don't get the green circle with the + sign and it won't drop. I put print() statements in the .dropDestination closures and the print0 in the first closure for processing the dragged item(s) doesn't fire. The one in the isTargeted does fire when the drag goes over the drop destination.

[@seanallen]

I just checked the project and rebuilt it with the latest Xcode and iOS 17 and the project is working. Are you following my project exactly, or trying to implement it into your existing code?

[@chuckincharlie]

@@seanallen Thanks for checking it for me. I'm kind of doing both. I have an app I'm building that uses AppleMusic and I'm building a playlist builder for it. A list of songs on one side and the playlist(an empty list initially) on the other side and I want to drag songs onto the playlist. I built a simplified separate project to implement basically what you're doing for quick reference on other projects but couldn't get it to work. That project uses the two lists though which I think is the problem. Someone on Reddit iOSProgramming said to use onDrag and onDrop when working with lists. Interesting thing is I threw print() statements into both halves of the .dropDestination and the first print() in the top section doesn't fire but the second Print() in the isTargeted does. I also was primarily building for iPad and got an error off the drag (Found no UIEvent for backing event of type: 11; contextId: 0xaabebfd) and I tried it on iPhone and didn't get the error but it still didn't work. Added primarily in case this might help someone else.

[@pro100filipp]

​@@seanallen I have the same problem - but in my case it does not work at all. Step to reproduce: - download Xcode project from the link in the description - try to drag and drop using Preview - nothing happens, it just does not respond to my gestures - build on my iPhone 12 mini and try to drag and drop - still nothing happens, it just does not respond to my gestures I have Xcode Version 15.0.1 (15A507), Swift version 5.9, macOS version 14.1.1 Same problem goes for any tutorial projects using draggable/dropDestination and also for my own code

[@thaisrobba6449]

@@pro100filipp Seems to be a problem for apps that also target macOs. I couldn't for the life of me understand what was different from the tutorial and my project, so I downloaded Sean's starter project and yep, adding mac as a build target breaks it 🫠

[@Mailliwi2]

+1 on this. Also trying to use this with on a Mac target and it doesn't seem to be letting me use my own models. Works fine with [String] but not with custom models. To be more precise, I can drag the custom views fine, but cannot drop them in the specified drop destination. I am not using the previews, as they don't work for the drag and drop functionality at the time of this message. Pretty confident I've set up everything properly, including setting up the custom UTType in the project's info.plist. Will continue investigating.

[@garya1809]

Hopefully not too nitpicky but if you redo this video or do something similar in the future, can you call it something other than task? a Task class in C# or like a Task/FutureTask in Java mean something very different than a chore/todo and I'm sure other languages use Task as like a promise/future event, and while I watched this I kept saying stuff "but where is the task callback?" or "wait is the variable inProgressTask for a cancellable promise?" IDK - just some random thoughts.

[@AlekhyaBatchu]

Can we remove the green plus icon when it is dragged??

[@DaniNotHere]

Did you solve it?

[@chuckincharlie]

How much of the boilerplate of conforming to Transferable will Apple make go away in the next year or whatever.

[@cakeezz]

Should this only be used for dropping items between containers? What if I want to reorder the items within the container?

[@seanallen]

I believe this will still work, you just need to add the logic when the item is dropped to re-order the items in each array

[@isaacboothe9399]

Gold. Thank you!

[@seanallen]

You're welcome!

[@AkimboFennec]

Hey Sean, just a quick question: it is already been 4 years since SwiftUI has been released. My question is, is it still the case that UIKIT is more advanced than SwiftUI? For Rex maple, changing a placeholder holder in SwiftUI vs UIKIT? Or is SwiftUI now just as advanced as UIKIT?

[@seanallen]

If you need to do VERY HIGHLY customized UI, then UIKit is still the way to go. You have a lot more control. That being said, SwiftUI gets better and better each year and is Apple's future.

[@AkimboFennec]

@@seanallen so you say that UIKIT is still more advanced though. Thank you

[@dre5671]

@@AkimboFennecnote that, not only can you implement UIKit in your SwiftUI project, but Apple has recently simplified it, and I’m sure will continue to simplify.

[@thealeos]

Is it possible to hide an item that is being dragged?

[@cheesable]

when I try to drag after adding draggable, the object kinda pops up but doesnt move. do you know what is the issue?

[@septimir5278]

Also experiencing this issue.

[@septimir5278]

Cross-referencing my solution below: "for future reference to others encountering this issue: The template is OK. The drag and drop gesture must be attempted in the simulator, not the preview. I guess the behavior between these two is not identical, so beware."

[@cheesable]

@septimir5278 thanks. That's an easy fix. Hmmm. I'll go try it out!

[@discodolken]

Brilliant! Thank you for the good content :)

[@seanallen]

Glad you enjoy it!

[@AndrewDChristie]

Thanks!

[@TImHagele]

any tips on where to start if i want to add pictures to my UTType ? Does not conform to Hashable / Codeable... struct menuItem: Codable, Hashable, Transferable { let id: UUID let itemName: String let summary: String let ingrediants: String let extras: String let demoPicture: Image? let fullSizePicture: Image? static var transferRepresentation: some TransferRepresentation { CodableRepresentation(contentType: .developerType) // DataRepresentation(contentType: .developerTask) // FileRepresentation(contentType: .developerTask) } }

[@TheMcGloneCode]

Hey how would you make a HStack in a scroll view but the user can change the order of the items within? Can you use .draggable?

[@VladimirKim-cl3rh]

Thank you very much!!!

[@seanallen]

You're welcome!

[@ios3946]

@seanallen how can I detect which view is the one being dragged? perhaps for changing the color of the destination one.. .draggable doesn't offer any callbacks :(

[@zykis999]

.draggable modifier has a preview parameter for such purpose

[@septimir5278]

I believe the template no longer works out of the box. Adding `.draggable(task)` in step one allows the object to pop up on hold click, but it cannot be dragged at all--it is stuck in place (it cannot even be dragged to a `.dropDestination`, which is added later). There is no build error. Can someone explain why this behavior is occurring? Someone else in the comments is also experiencing this.

[@septimir5278]

All right, so, for future reference to others encountering this issue: The template is OK. The drag and drop gesture must be attempted in the simulator, not the preview. I guess the behavior between these two is not identical, so beware.

[@yugasamuel6402]

Hey everyone! Does anyone know how to remove the delay when we want to drag our views? Your help would be much appreciated! Thanks in advance!

[@kavinda_dilshan_paramsoodi]

Loved It....

[@seanallen]

Happy to hear it!

[@alejmc]

And I’m sure I’m gonna love it!😅 EDIT: well, yes I did. Great tutorial

[@HeyNoah]

Super awesome!

[@seanallen]

Glad you liked it!

[@dmitrygolovin8066]

Great video!

[@victorriurean]

[@shaggyfromscobbydooo2572]

changing com.public.data to public.data helped to fixed a iOS on macOS fyi

[@sonn.andrey]

Amazing, thank you for this.

[@andresp1582]

Awesome app

[@seanallen]

Glad you liked it!

[@richprice5434]

Didn’t Kavsoft build this exact thing a few days ago ??

[@seanallen]

Yes, but a few days ago I tweeted a sneak preview video of this tutorial and that I would be posting later this week. That tweet went up ~6 hours before their video went live. We talked it out on Twitter as coincidental timing. My Tweet - twitter.com/seanallen_dev/status/1682078941857587202

[@richprice5434]

@@seanallen interesting

[@VijayarajSuyambu-he9jc]

subscribed

[@kunaldhopavkar8685]

My code was working unitl i change the exportedAs parameter for UTType with new bundle identifer and solution why it break and how to fix it ? @seanallen

[@AndrewDChristie]

Thanks!

[@seanallen]

Happy to help and I appreciate the generosity, Andrew!

[@bbz9002]

Thanks!!

[@seanallen]

No problem!