#Angular Material CDK — Drag and Drop between Lists [Mid-level, 2021]

#Angular Material CDK — Drag and Drop between Lists [Mid-level, 2021]

#Angular Material CDK — Drag and Drop between Lists [Mid-level, 2021]

📣 Learn how to build custom form controls like select dropdown with multiselection in my new advanced Angular Forms course https://bit.ly/advanced-angular-forms 📣

In this #Angular #tutorial you will learn how to implement basic Drag and Drop functionality using Angular CDK. You will find out how to make any element on your page draggable and how to drop it into another container. Besides this, we will fix a very common bug when during the dragging of an element, you have the wrong repositioning. I hope you will learn something new today. Enjoy and do not forget to share this video.

📣 Become a Pro in Angular Material Theming (Advanced Course) 📣
https://bit.ly/angular-material-themi…
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
https://bit.ly/complete-hasura-course
✅ 20%-off coupon code: HASURA-EASY-START

Time Codes:
00:00:00 - Intro;
00:00:38 - Let’s get started;
00:15:11 - Add some animation;
00:15:34 - Fix a buggy reordering during an element dragging;
00:18:41 - Outro \u0026 Announcements;

Link to the source code:
https://github.com/DMezhenskyi/angula…

#angulartutorial #angulardragdrop #webdevelopment


Content

4.32 -> Hi everyone! My name is Dmytro Mezhenskyi  and in this video, we will implement  
9.68 -> drag and drop functionality for the project from  my previous video about "Named Router Outlet"  
17.52 -> and we will implement functionality similar  to what you can see right now on your screen,  
24 -> so we will learn some essentials of  drag and drop functionality how to  
30.72 -> drag an element from one container to another one  and I hope you will learn something interesting  
36.48 -> today. So... let's get started first of all  let's be sure that we installed the angular  
44.08 -> CDK package this is very important without this  package it's not gonna work and then we have to  
53.52 -> import the model which is responsible for the  drag and drop implementation so I will go to  
60.56 -> app model and somewhere here below  in the imports I'm going to import  
68.48 -> drag drop model which comes from CDK drag  and drop right cool uh once we have it  
81.44 -> we have to do what we have to create the drop area  inside the user details right somewhere here below  
89.84 -> we have to create some you know  rectangle whatever where we will drop our  
97.28 -> previous image previews so let's implement it  I will go inside user details and somewhere  
106.96 -> here below I will introduce the new list  and I say that it has class drop area
120.16 -> nice and let's add some basic styles for it
126 -> so here are some basic styles  and now we see this nice area  
133.04 -> or not very nice but we don't care about  the beauty of our view, for now, cool  
140.24 -> the next step would be to implement to make these  previews draggable yeah because now we cannot do  
148.88 -> it really and if you want to make some element  draggable with angular cdk drag and drop model  
158.48 -> you have to do the very simple thing you have  to go to the element you're going to drag and  
164.8 -> we're going to drag this li element right and you  have to attach one simple directive called cdk  
174 -> drug once you add this directive to any element  you can take any element and drag it around  
184 -> your application so pretty cool but a bit useless  in our case we want to uh transfer it from one  
196.16 -> list so to say to another one yeah we don't  want to uh have such a mess as we have right now  
205.6 -> so we have to introduce to um drag and drop  lists right and in order to do this we have  
213.68 -> to utilize another directive called cdk drop  list and we will attach the first one to
225.28 -> our uh ul list yeah so kind of parent  of of this preview elements and the same  
234.8 -> we're going to do for uh our drop area we created  a few minutes ago yeah so this is the list this is  
245.12 -> indicates that the area where we can drop some  item yeah and we have to the first one and the  
253.44 -> second one cool and having these two directives we  have to connect them together right so they know  
263.44 -> about each other and in order to achieve this we  have to use the third special directive called cdk  
271.68 -> drop list group and this directive should be  attached on the level above so our drop list  
280.24 -> should be let's say children for this directive  and our nearest parent will be in app component  
291.44 -> apparent i mean not component but html element  yeah and so this is our sidebar here inside we  
299.76 -> have the first drop list and this is the section  with details here inside we have the second drop  
308.72 -> list and as i said our drop list group should  be apparent so we will attach this directive to  
318.16 -> our main element and it's going to be cdk drop  list group and this directive will group all  
328.08 -> child drop list together uh it doesn't matter how  many of them you have you have you can have i know  
334.48 -> three four or five uh drop lists they will be  connected automatically within this uh directive  
342.08 -> i hope it's uh pretty much clear so far yeah now  we have our drop list connected and we can listen  
351.36 -> actually for some events which are happening when  we drag and drop stuff right so um in user details  
362.56 -> uh let's start to listen cdk drop list dropped  yeah when we drop some element within this list  
372.8 -> it will fire some event and let's create some  handler for it i will create a method called drop
382.64 -> it has some event
387.44 -> and here below I will create this method  and as an argument, we get the event  
395.44 -> and the type of it is CDK drug drop and this  is generic we have to define the type which we  
405.6 -> get here and this is basically a photo  array right and we have to import a photo
417.68 -> it's not imported um ah sorry okay we have this  interface within a photo sidebar component and we  
429.68 -> don't export it let's exclude it from here  and put it in some separate component uh  
437.76 -> or sorry component file I will name it photo ds  and we're going to export this interface here  
446.08 -> and adjust it in our photos sidebar
455.04 -> and inside the user details also we can import  it from here and let's have a look what do we  
462.88 -> have inside this event as you see that this  is um quite complex object let's investigate  
472.48 -> what is inside and try to drop some element  inside so i will open uh debug console i will  
482.88 -> zoom it for you and now we try to drag  it and once i drop it you can see that  
495.12 -> there is some big object and let's have a look  what is inside so we have container this is  
503.6 -> the container uh this this one where we actually  drop the element then we have previous container  
512.32 -> the container where we uh where we this element  has had taken yeah and this is the item itself  
522.24 -> the item which we dropped or dragged and dropped  but here is one problem and namely we don't have  
530.24 -> really data which represent these sub nails  which represents the drop list and so on so  
538.4 -> the one the only one thing we have if we open as  example container we have just some event emitters  
545.44 -> we have reference to html element itself it's not  really what we would like to have we would like to  
554.16 -> have the real data for it and we can do it this  cdk drop list has a property cdk drop list data  
566.88 -> and here you can already associate some data  which represents this list right and we would  
575.92 -> like to put our photos to as a value for this  drop list data so i'm going to refactor it a  
583.68 -> little bit and i will add um ngif directive and  let's say that when we resolved photos save it to  
596.08 -> variable photos and we provide this value for drag  drop list data property and we replace our ng4
611.36 -> with this, yeah? So there will be the  same basically behavior but when we  
621.36 -> drag and drop something here and try to  inspect so previous container this is where we  
629.12 -> have taken the element and you can see how  we have the data and if we expand it we see  
636.88 -> our albums here so the array which is rendered  right here this is uh exactly what we would  
645.68 -> like to have and now we have to do this similar  thing for our drop area in user details so I will  
657.84 -> do it like this but here I have to create this  property and it's going to be an array of photos
671.44 -> by default it's an empty array here we go and  now if we drag and drop some element and expand  
682.8 -> this so the container where we dropped  the data is an empty array right because  
689.2 -> we have no elements here but the  previous container is our data here  
697.28 -> all right I hope it's clear for now and now  we have to transfer uh item from one array  
706.72 -> to another one basically this is everything we  have to do and in order to do this we will be  
714.4 -> using another helper function which comes with  angular CDK and it's called transfer array item
724.96 -> here we go and this transfer array item it  takes four arguments uh basically this is  
733.76 -> the current array this is where we pull data  the uh target array this is the array where we  
743.6 -> drop our new item and then the current index and  target index this is the index where it was in the  
753.36 -> previous container and the new index where this  element will be placed in the new array okay so  
761.68 -> we can provide event previous container data so  this is container where we pulled the element  
771.44 -> now we have to provide the container data so this  is our current array and then event previous index  
785.6 -> and event current index alright now we can save  it i go to the browser and i drag and drop it  
798 -> here and nothing has been changed why ah  because we forgot sorry guys we forgot to  
809.2 -> render our photos within this  well so we have to create a li  
815.28 -> then i create some ng four let's say that  let photo of photos and the source value of  
827.04 -> this image will be photo thumbnail url  and let's say that width will be 60 pixels  
836.56 -> and you may reasonably ask how we will get  new elements inside this photo so we don't  
844.72 -> explicitly mutate it we don't add the new  elements to this array yeah and the thing is that  
854.64 -> here when we transfer element this container data  this is the link to our photos array yeah we take  
867.76 -> this property we provide to drop list data right  here and data which is right here contains the  
881.44 -> reference to our property so once we mutated  uh data here inside the container data this  
890.08 -> is the same that we mutated our photos property  that's why we will see this transferred object  
899.12 -> right here okay i hope now it's a bit more clear  now i hope that it will work replace it and yeah  
909.76 -> everything works fine however i would suggest  you maybe make some little improvements first  
917.2 -> of all i would add maybe some animation  and you can do it easily by adding some  
924.48 -> special css this two classes this is what  you have to add in order to have some  
932.64 -> animation and now we can save and try to drag  all right we have animation but you see that  
940.08 -> view is completely broken if you have never  worked with angular drag and drop you will  
946.16 -> encounter this definitely and the problem is that  at the moment when you start to drag some element  
953.2 -> you see this blinking at this time angular creates  another html element in the placeholder for  
960.72 -> dragged element and basically the image there  inside uh it needs some time to be rendered  
970.56 -> but once you start dragging uh probably this  is just the theory i didn't really investigate  
976.72 -> it in depth but i think that at this time angular  already calculates the height for this placeholder  
984 -> and it happened before the image is rendered  so the height will be definitely wrong maybe  
990.72 -> some one or zero pixels yeah and angular  when we moving it here it considers that  
999.2 -> the height of dragged element is very little  this just i know zero pixels maybe and because  
1005.76 -> the calculation is wrong it has this strange  behavior and you can easily fix it by introducing  
1014.08 -> the fixed height for the dragged element  so for hourly we can say that height is  
1022.88 -> 70 pixels yeah and once i save it and try to drag  you see that now it works properly because uh  
1033.2 -> now we have fixed height angular just read this  value it knows that defined height is 70 pixels  
1041.52 -> it's immediately like uses this height for  calculation that's why yeah we have proper  
1049.28 -> uh reorder and i can drag and put it here yeah  so it works as expected if you want to have the  
1062.4 -> vice versa behavior so put it back  you just have to make it draggable  
1070.24 -> right here in user details cdk drug and  you need to copy paste this drop method to  
1080.88 -> the photo sidebar say that you  are listening for dropped event  
1087.84 -> and create drop handler and here below you should  do pretty much the same what we have done before
1099.28 -> ah, I forgot curly braces, and yeah  now we can drop it here drop it there,  
1109.44 -> and then I can move it back like this and  move it back like this as easy as that  
1116.96 -> you can improve the view a little bit whatever  but that's your homework alright guys that were it  
1124 -> I hope it was interesting and if so please  share this video with your colleagues I would  
1129.84 -> highly appreciate it and don't forget to leave  your feedback in comment sections subscribe  
1134.96 -> to my channel and of course check out my video  courses there are a couple of them they are very  
1141.44 -> interesting about Graphql about angular material  theming these cons are in the video description so  
1149.52 -> it worth it. I wish you a productive  week stay safe and see you in the future

Source: https://www.youtube.com/watch?v=O489gFEoj-o