SwiftUI Drag and Drop with Transferable Custom Object
Переглядів 17,036
День томуGo to squarespace.com/seanallen to save 10% off your first purchase of a website or domain using code SEANALLEN.
Drag an drop in SwiftUI was revamped in iOS 16. It now uses the .draggable and .dropDestination modifiers which require conformance to the new Transferable protocol in Swift. In this video we create a kanban board to teach you how to use Drag and Drop. In the second half of the video I show you how to conform your custom objects to Transferable so you can use them with Drag and Drop.
Starter Project Download:
www.dropbox.com/sh/lbrtbnd5mk...
Human Interface Guidelines - Drag and Drop:
developer.apple.com/design/hu...
WWDC 2022 - Meet Transferable:
developer.apple.com/videos/pl...
WWDC 2020 - Uniform Type Identifiers:
developer.apple.com/videos/pl...
My iOS Dev Courses:
seanallen.teachable.com/
Twitter:
Sean Allen - / seanallen_dev
Hired.com:
hired.com/x/1n01g
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Paul Hudson's Hacking With Swift:
gumroad.com/a/762098803
Donny Wals - Combine:
gumroad.com/a/909014131
Mark Moeyken’s SwiftUI Books:
www.bigmountainstudio.com/swiftui-views-book/fzc51
Objc.io Books (Thinking in SwiftUI & Advanced Swift):
gumroad.com/a/656585843
Timestamps:
0:00 - Drag and Drop in iOS 16
0:32 - Starter Project Overview
1:21 - Strings vs. Custom Object
1:52 - Draggable
4:25 - Drop Destination
7:21 - Drag and Drop copy by default
7:51 - Remove tasks from starting array
9:03 - Remove duplicates from destination
10:43 - Highlight drop target on hover
13:28 - Drag and Drop basics review
17:01 - Create Custom Object
18:18 - Conform to Transferable
20:06 - Custom Uniform Type Identifier
22:23 - Adapt code with new Transferable type
25:39 - Wrong drop target type example
26:25 - Did you enjoy that?
#swift #softwaredeveloper #iosdeveloper
@seanallen 9 місяців тому
Go deeper into SwiftUI and UIKit with my iOS Developer courses at seanallen.teachable.com
@naeempetiwala6503 9 місяців тому
Not the video related question but could you please help me. I am tasked with implementation of Google SSO in our ios app. Everything's fine but i want to implement it in such a way that i have more than one client ID and based on the user the client ID should change. We cannot change things in info.plist so i am not sure how i can achieve this. I searched hours but couldn't find anything helpful please help me.
@blytte 25 днів тому
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 25 днів тому
I appreciate that. Happy my channel is helpful for ya
@soheilpakgohar6630 9 місяців тому
My life is divided into 2 parts, before and after this tutorial
@seanallen 9 місяців тому
Lol, glad you liked it.
@StewartLynch 9 місяців тому
Pretty much the perfect video Sean. So well explained as usual
@seanallen 9 місяців тому
I appreciate that. Means a lot coming from you, Stewart.
@FIightAviator 2 місяці тому
Great Tutorial! Could you make a tutorial with this but you add a + button which adds a block that you can drag?
@AK907 9 місяців тому
Been waiting for this video for a long time! Thank you. Just purchased the widget course as well.
@seanallen 9 місяців тому
Glad you liked the video and hope you enjoy the Widgets course. That's a fun one.
@chrispy104k 8 місяців тому
Great tutorial Sean. Drag and Drop has always been a bit of a mystery to me. Cheers man.
@seanallen 8 місяців тому
Happy to help!
@dmitrygolovin8066 9 місяців тому
Great video!
@rahuljamba5846 Місяць тому
Great Allen Thanks for sharing your knowledge !!
@seanallen Місяць тому
No problem :)
@nicolaiharbo2201 9 місяців тому
Brilliant! Thank you for the good content :)
@seanallen 9 місяців тому
Glad you enjoy it!
@AndrewDChristie 9 місяців тому
Thanks!
@isaacboothe9399 6 місяців тому
Gold. Thank you!
@seanallen 6 місяців тому
You're welcome!
@zykis999 6 місяців тому
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
@HeyNoah 9 місяців тому
Super awesome!
@seanallen 9 місяців тому
Glad you liked it!
@VladimirKim-cl3rh 7 місяців тому
Thank you very much!!!
@seanallen 7 місяців тому
You're welcome!
@andresp1582 7 місяців тому
Awesome app
@seanallen 7 місяців тому
Glad you liked it!
@kdtechniquesofficial6153 9 місяців тому
Loved It....
@seanallen 9 місяців тому
Happy to hear it!
@alejmc 9 місяців тому
And I’m sure I’m gonna love it!😅 EDIT: well, yes I did. Great tutorial
@Sengardisback 9 місяців тому
Would love to see the next video from your „built ship provit“ series. How is it going with creator view?
@seanallen 9 місяців тому
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.
@TheMcGloneCode 8 місяців тому
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?
@chuckincharlie 6 місяців тому
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 5 місяців тому
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 5 місяців тому
@@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 5 місяців тому
@@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 4 місяці тому
@@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 3 місяці тому
+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.
@alexl2512 3 місяці тому
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?
@naeempetiwala6503 9 місяців тому
Not the video related question but could you please help me. I am tasked with implementation of Google SSO in our ios app. Everything's fine but i want to implement it in such a way that i have more than one client ID and based on the user the client ID should change. We cannot change things in info.plist so i am not sure how i can achieve this. I searched hours but couldn't find anything helpful please help me.
@chuckincharlie 6 місяців тому
How much of the boilerplate of conforming to Transferable will Apple make go away in the next year or whatever.
@ios3946 8 місяців тому
@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 6 місяців тому
.draggable modifier has a preview parameter for such purpose
@thealeos 9 місяців тому
Is it possible to hide an item that is being dragged?
@AkimboFennec 9 місяців тому
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 9 місяців тому
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 9 місяців тому
@@seanallen so you say that UIKIT is still more advanced though. Thank you
@dre5671 9 місяців тому
@@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.
@catsCollection 15 днів тому
it works on iOS but on macOS it is being dragged but not accepting it to be dropped, please help
@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
@user-up6xo6gx8m 5 місяців тому
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) } }
@yugasamuel6402 4 місяці тому
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!
@shaggyfromscobbydooo2572 3 місяці тому
changing com.public.data to public.data helped to fixed a iOS on macOS fyi
@septimir5278 4 місяці тому
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 4 місяці тому
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.
@cheesable 6 місяців тому
when I try to drag after adding draggable, the object kinda pops up but doesnt move. do you know what is the issue?
@septimir5278 4 місяці тому
Also experiencing this issue.
@septimir5278 4 місяці тому
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 4 місяці тому
@septimir5278 thanks. That's an easy fix. Hmmm. I'll go try it out!
@victorriurean 9 місяців тому
@richprice5434 9 місяців тому
Didn’t Kavsoft build this exact thing a few days ago ??
@seanallen 9 місяців тому
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 9 місяців тому
@@seanallen interesting
@AndrewDChristie 9 місяців тому
Thanks!
@seanallen 9 місяців тому
Happy to help and I appreciate the generosity, Andrew!
Amway Home Goodies
Переглядів 32 млн
Inter Link
Переглядів 214 тис.