SwiftUI Drag and Drop with Transferable Custom Object
HTML-код
- Опубликовано: 4 июл 2024
- 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 
Наука
![Eminem - Tobey (feat. Big Sean & Babytron) [Official Audio]](http://i.ytimg.com/vi/9xn0OHEZZ8Q/mqdefault.jpg)
Go deeper into SwiftUI and UIKit with my iOS Developer courses at seanallen.teachable.com
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.
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.
I appreciate that. Happy my channel is helpful for ya
Pretty much the perfect video Sean. So well explained as usual
I appreciate that. Means a lot coming from you, Stewart.
Been waiting for this video for a long time! Thank you. Just purchased the widget course as well.
Glad you liked the video and hope you enjoy the Widgets course. That's a fun one.
Great tutorial Sean. Drag and Drop has always been a bit of a mystery to me. Cheers man.
Happy to help!
Great Allen Thanks for sharing your knowledge !!
No problem :)
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
Brilliant! Thank you for the good content :)
Glad you enjoy it!
Great Tutorial! Could you make a tutorial with this but you add a + button which adds a block that you can drag?
My life is divided into 2 parts, before and after this tutorial
Lol, glad you liked it.
Great video!
Gold. Thank you!
You're welcome!
Thanks!
Super awesome!
Glad you liked it!
Thank you very much!!!
You're welcome!
Would love to see the next video from your „built ship provit“ series. How is it going with creator view?
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.
Loved It....
Happy to hear it!
And I’m sure I’m gonna love it!😅
EDIT: well, yes I did. Great tutorial
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?
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?
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.
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.
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.
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?
@@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.
@@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
@@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 🫠
+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.
How much of the boilerplate of conforming to Transferable will Apple make go away in the next year or whatever.
Awesome app
Glad you liked it!
Is it possible to hide an item that is being dragged?
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?
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.
@@seanallen so you say that UIKIT is still more advanced though. Thank you
@@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.
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)
}
}
@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 :(
.draggable modifier has a preview parameter for such purpose
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!
Should this only be used for dropping items between containers? What if I want to reorder the items within the container?
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
changing com.public.data to public.data helped to fixed a iOS on macOS fyi
it works on iOS but on macOS it is being dragged but not accepting it to be dropped, please help
when I try to drag after adding draggable, the object kinda pops up but doesnt move. do you know what is the issue?
Also experiencing this issue.
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."
@septimir5278 thanks. That's an easy fix. Hmmm. I'll go try it out!
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.
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.
Didn’t Kavsoft build this exact thing a few days ago ??
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
@@seanallen interesting
Thanks!
Happy to help and I appreciate the generosity, Andrew!