Drag & Drop In Angular | Jira Ticket Board in Angular | Angular Tutorials

welcome back to Learning Partner so in this video we are going to see how we can achieve drag and drop in angular and we are not going to use any third party library to achieve this we will simply use the events we have like drag start drag drop okay right so by using basic functions we are going to achieve this now the scenario we are taking is like jira boom right so most of most of you must have heard about jira or someone might be using it also right so in jira we have the board where we can see the tickets and we can move those tickets uh regarding that status right so I just need a CSL so I'm using chat GPT to get that particular CSS no need to waste your time to designing that particular board and write the CSS just and get the code so what I'm going to search is can man board HTML CSS it will provide you the basic board okay so let it load yes so this is going to be my HTML let's copy this and let me post it over here let's say okay so currently it is coming like this now we need the CSS also so she says this CSS it will be over here let's see how does it look now yeah so you can see it is looking like this let's just add some static data over here also so you can see we have three status like to do in progress and done in each respective status we have some task also so the objective is that I can drag this task one and paste it over in progress or in internal so on like Versa right so I can move this by just simply dragging and dropping so we can you we are going to do this by using the simple drag start and drop on drop events provided by angular only right so first thing is like we need we will we are going to need an array of tickets so these are nothing but tasks or the tickets we can say so I'm just doing I have just created a array that I am going to copy paste in my component.ts just format it right so you can see this is an array RF object where I have the properties like ticket ID ticket name and status just like that status is like in progress then we have some to-do tickets and then we have some done tickets also now what I have to do is like first I need to show these tickets in respective you can see I have three columns first is for to do then second is for in progress and third is for done but I don't have the separate array right I just have a simple single array but I can create a function which which are which is going to filter us out the data according to the status so I am creating one method filter tickets and for this function function of common parameter will be there so that parameter let's say status will be string now what I have to do is I'm just going to return the data by filtering tickets array dot filter Lambda expression so I am going to compare with status equal to equal to this status whatever the parameter I get I am going to pass it over here so now just pay attention like this function is responsible to get us the filtered ticket whatever the status we send now this I am going this function I am going to use in HTML where on this ticket so ng4 instead of the variable I am going to pass the function and here I have to pass in progress and whatever the things we have various status so first was in progress so let me just copy pass it over here and let me remove this just like this we are going to copy paste and just the status will be different here it will be done the first one should be 2 row and the middle one should be in progress right and since it is a for Loop so instead of this static test I am going to show whatever the task name we have I term dot ticket ID well right so let's save and check it now so you can see whatever the tickets I had in the to-do status that are visible over here whatever the tickets I had in the in progress state that are visible over here and same like in the done State also let me just show you so in to do we had four tickets so you can see so in to do we had four text now what we have to do let's just show the details also the ticket name VR tag item Dot ticket name we can show let's see one more time okay so you can see we uh we have shown the tickets now our main task is going to start that we should be able to drag and drop this right suppose I have to move this zero zero zero two zero zero two two in progressed so I should be able to drag and drop it in this particular panel now first thing we are going to need is we have to use the functions that are provided by the angular those are drag in the drop event right so so first event we are going to write is when we are starting to drag means drag start event so that will be on the particular due that is the this div that is Task okay so here we have to write the event in round bracket drag control space it is not suggesting Dot okay so now this is the event when we start to drag right so that is the event so here I will be waiting on drag start and I will be passing the item whatever the item I am dragging right so this function I have to create let me just minimize this so first event that is drags contract start and from HTML what I'm sending the current item right so that I need to catch it over here item colon any now I need one variable to store like which item is getting dragged right so current item on any whatever the item I'm dragging that I will store in this variable so this dot current item is equal to item right so whatever the current item I am getting I am draw dragging that particular object will be stored over here now next thing let's say it start now this function will be needed over all the NG for tickets right then once I drag once I start dragging the next event will be one side drop right so where I will be dropping on this particular column so first thing on this column we need to write the event drop on drop event first dollar event we can pass and then the status like where we are going to drop so this column is for to do so we can just pass it over here like this and let me just copy paste this on all the columns just in status will be different and this will be done now let's create this function on drop so for on drop we have two parameter first is the event right so let's create event hold on any and second will be status now what we have to do over here is just write it right so when we drag and drop over here so what we are going to do we are going to send the status like on where I mean on which column you are dropping let's say you started from in progress and you are dropping on to do so where to drop is to do right an item you are storing the draggable means the current item which you are dragging that you have in the current item so now what you the logic is whenever you are dropping one ticket to any other status you just need to change the status of that ticket right so what I'm trying to say is let me just say right when I'm dragging because currently we are not able to drag and drop that is because one event is extra event we are going we have to implement is there that is drag over that we need to implement so on every column we are going to even Implement that it is drag over on drag over round bracket and we are going to pass event only so that is dollar event let's create the let me just copy paste this and we need to create this function and here we are just simply stopping that event from happening so we are passing event called any and here simply event Dot prevent default right so let's just say even check if we are able to track let's just add the console also this is for drag over on drop and drag start let's see how many events get triggered so if I am trying to drag this or still not okay one more extra thing is remaining that is draggable true we are not able to drag because we haven't said for that particular element that we can drag or not so here draggable true is needed we are by adding this property we are saying like yes we can drag this particular element so now we will be able to drag it so you can see the something is happening right event dot prevent is not okay spelling mistake is there so I will correct it let me just correct the spinning let's save and check it once again so if I try to drag and drop see everything is happening why it is saying event it is not let's just add a debugger and check the spelling event default let me just copy paste you know so swelling mistake was now if I'm dragging and dropping let me just disable so you can see console consoles are getting printed properly now what I have to do I am able to drag and drop it The Element is not getting dropped over here because when we are dropping we need to change the status of this ticket with the wherever we are dropping so for that the draggable item we have stored in the current item right so when we draw we need to write simple constant so from this array we need to find particular ID on this Dot find the condition will be [Music] um I mean dot we are going to match the data with ticket ID ticket ID is equal to is equal to this Dot current item dot ticket ID the draggable item we have stored in this particular variable again not undefined check we can add record not equal to undefined so if record is not equal to undefined we just going to update the status is equal to whatever the status we get from the drop area and we are just going to make this null once we drop that we can make it null and this event dot prevent default we are going to need it over here also so let's say even check it one more time now it should work okay so let's say this user registration task was in the to-do status now if I am dragging and dropping into the in progress you can see it came here now this layout page I want to make it to the done state so you can say layout pages in The done state right so like this you can drag and drop so we have used the normal event also but with that event we have just added the logic like when we when we start to drag the item which we are dragging we have stored that into one variable right means we know like which item is currently being dragged dragged right but when we drop right so the drop event so that is drop event when we this even get triggers we are sending the status like where you are dropping right so what we have did on drop first from that particular tickets array we have find that ticket ID the trackable ID current record we have found then we have just updated the status of that ticket means when you are dragging this we have stored that this zero zero zero zero one uh ticket data into current variable right once we drop it we are just going to find that particular element from the array and we are going to update the status within progress that's it but when you look at it it looks like we are actually dragging and dropping so this is the simplest logic which you can do and this is the custom code so you have the control over it right so with this piece of with these three functions you can implement the drag and drop so this is an array where you have the ticket data this an extra variable this function is for filtering the data because we had three columns right to do in progress under so in each state we need to show the particular status ticket so for that in ng4 by you rather than passing the array we have passed we have called the function and send the status like which tickets we need right then on the tickets we have start we have written one event that is drag start and we have passed the item so on drag start whatever the item we get we have stored that into current item drain when sweet drop it on the parent column so on drop event is there and we are sending the status and we are just finding the particular item from that array and we are just updating the status whatever we get it over here that's it so with this simple piece of code you can achieve the drag and drop this is again a machine test scenario most of the companies are looking rather than basic crowd operation most of companies are looking for something out of the way machine test coding samples so this is kind of a code you should have handy right so that's it with this current video in next video again I will try to fix some of the interview questions or the machine Test example that's it please do subscribe and like my videos

Channel: LEARNING PARTNER

Views: 7,845

Keywords: Angular Drag and Drop, drag n drop in angular, how to drag n drop in angular, drag and drop using angular, jira board in angular, angular drag and drop div, how to do drag n drop in angular, Drag and Drop between Lists, Angular Material Drag and Drop, How to Use Angular Drag & Drop, Drag and Drop with the Angular CDK, Drag & Drop List using HTML CSS & JavaScript, Draggable Cards in Angular, Angular Drag & Drop, Angular Drag and drop without any third party Library, angular 17

Id: LDm9XCAA2Vc

Length: 20min 25sec (1225 seconds)

Published: Tue Aug 08 2023