HomeНаука и техникаRelated VideosMore From: Angular Firebase

Draggable Sortable Firestore

252 ratings | 5462 views
Build a drag-n-drop list with Firestore using Shopify's draggable library. https://angularfirebase.com/lessons/sortable-drag-and-drop-lists-in-firestore/ - Draggable https://shopify.github.io/draggable/ - Firestore https://firebase.google.com/docs/firestore/
Html code for embedding videos on your blog
Text Comments (33)
Patrick Lima (4 days ago)
so simple and powerful, nice!
pit fermi (5 days ago)
too complicated. hardly a tut
鄺子峯 (5 days ago)
I personally think that this is the best channel by far
jatin raj (5 days ago)
Your intro man so cool... Love your tutorials 😍😍😍
Ramasamy NP (5 days ago)
Sorry, I can't follow this video because it's super fast for me.
Ramasamy NP (5 days ago)
+Daddy Do thank you
Daddy Do (5 days ago)
watch it first all the way through, to understand the whole thing and then, watch it the second time to follow along with coding. I had the same problem at first with him. Nevertheless, Jeff puts out great content.
Rahul Sawant (5 days ago)
Cool!! Great content... Thanks Jeff 😊
cypspark (5 days ago)
Great Video! Would it be possible to have a similar functionality with components? so moving around each components order within a view? Then storing the order of in FB
Joshuah Charney (5 days ago)
What is the theme you're using?
mattia esposito (6 days ago)
you can teach better code in a video of 8 minutes than my teacher in years great job thank you
Chad Krause (6 days ago)
It’s funny that you made this video, I just made a “timeclock” Angular app for my robotics team for signing into and out of our lab. I used two columns, and you drag your name from “not here” into the “here” column. I used Angular CDK 7.0.0 beta and it works decently well. Wish I would’ve known this existed
Leon Radley (6 days ago)
Good to know is that angular material 7 will include drag and drop functionality via the CDK. I've tried it out and it looks promising. Here is a blog post about it https://blog.angularindepth.com/exploring-drag-and-drop-with-the-angular-material-cdk-2e0237857290
Troy DC Thompson (6 days ago)
Dope!!
basdfgwe (6 days ago)
Is this safe to write back each time since it will charge per document write?
basdfgwe (6 days ago)
+Angular Firebase would it be good practise to allow the user to sort locally and commit their changes using a button click? Ever since your video around limiting unexpected costs due to multiple reading/writing of documents Ive tried to keep a keen watch on how I'm managing the documents.
Angular Firebase (6 days ago)
It will charge a read for each sort, so it depends on how often your users sort. If it is frequent, you might want to add a debounce or delay before updating the db.
Sivuyile Magutywa (6 days ago)
Good quality content,
יובל סאג (6 days ago)
You are absolutely amazing. The most helpful youtuber by far
Angular Firebase (6 days ago)
Wow, that's great to hear
RageBasterd (6 days ago)
simple & elegant
Willy Nguessan (6 days ago)
Awesome!!!!
Very cool video, as always. Coincidentally I read a article today about drag and drop. Take a look, it might interest you because it's a native solution, but it's not fully released yet https://blog.angularindepth.com/exploring-drag-and-drop-with-the-angular-material-cdk-2e0237857290
Angular Firebase (6 days ago)
Very cool, that looks like something to cover in a future video :)
Valeriy (6 days ago)
Thanks a lot!
nenotom (6 days ago)
And again you made content that was on my todo list! Though I was hoping an example use of Angular material upcoming drag&drop feature https://beta-angular-material-io.firebaseapp.com/cdk/drag-drop/examples ...But thanks to you I got good understanding to implement this myself :)
Mazouzi Zakaryae (6 days ago)
Great tutorial..I just want to add that It would be more interesting if the files where to be stored in nested folders ( and mirroring that to firebase storage )...i'm working on something like that, and it's pretty challenging.also i'm working on getting thumbnail previews of uploaded files like .docs, .pdf's through pupetteer and cloud functions. Thank you Angular firebase...most of the time your tutorials inspire great ideas !
Angular Firebase (6 days ago)
That would make a very cool topic, thanks for the suggestion :)
Awesome library, never heard of it before, thanks!
Johannes (6 days ago)
Very Nice, https://github.com/bevacqua/dragula is also a very nice draggable lib for angular
Angular Firebase (6 days ago)
Draggable is one of the coolest dnd libraries ever and pairs well with Firestore's new array field methods.
Carlos E Carrillo (6 days ago)
Awesome thanks!!!
David Lutta (6 days ago)
I love this !

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.