If I am not mistaken, when this example is completed, dragging items within just the first list (“numbers”) still works but dragging items within the second list (“otherNumbers”) causes items in the first list to move instead of the within the second list. Seemingly, this behavior can be corrected by changing the first argument in moveItemInArray method from this.numbers to event.container.data like Stephen mentioned at 5:05 seems to correct this behavior. I am new to this drag-and-drop so please correct me if there is a better deal with this. I realize this was just meant to be a very quick demo and not comprehensive one … thanks for the example!
Thank you for the great tuto. I don't try it yet. Will it be persistent? I mean after reloqding the page will the droped items will remain in place do I need additional work like storing index in database to make it persistent?
Hi Stephen, As usual an awesome articulation from your end. You ease learning process. I am developing a complex header with Authorization and dynamic menu items and trying to expose this as angular elements but the features fail in IE although I have necessary polyfills, if I somehow fix this then it fails in chrome. Was really expecting v7 to solve the elements packaging and polyfills issues. Could you provide some pointers. Any help is really appreciated.
Thanks for the feedback! Regarding your IE Angular Elements issue, you should file an issue on github.com/angular/angular to let us know, with the specifics, then we can follow up and work on it.
@@user-if1de8pt2j If you *REALLY* need a Mac, get one, it serves to be a strong machine for many dev things. Otherwise, you can do the same thing on a Windows or Linux system.
@@user-if1de8pt2j There is a Windows NVM here -> github.com/coreybutler/nvm-windows. As for Docker you can either use VirtualBox or use Vagrant (which is primarily the same thing), and Vagrant runs on windows. If you really do want Docker for Windows, it is available for Windows 10 Home. -> stackoverflow.com/questions/44406422/docker-installation-issues-on-windows-10-home-edition#answer-44406499 For node-sass you can try the StackOverflow answer here -> stackoverflow.com/questions/46953808/node-sass-installation-issue-on-windows-10#answer-46977724. Windows needs a lot of configuration to get things to work, that's one of the great pains of working with Windows. Linux provides a different, more stable (and probably closer to Mac) configs as possible. Mac is well, Mac. Many devs use it, and I believe are quite happy with it.
Hey there, I just tried the steps & everything works fine. But am facing issue when the list is large & while dragging a card, it's not autoscrolling. Any idea how we can fix that. Even though on angular material website, all the demos have autoscrolling working.
in the video he registers a drop event on the html, which is bound back to the component. i tried doing the same thing - dragging files into an area. however, i don't see my component method firing... any other wiring needed?
Short answer is yes. Remember Angular is MVVC-ish.. if you can't tackle the problem from the view, you can do it from the controller. In your case whatever item is selected could be added to an array and the array is set a the 'draggable'.
do you have an idea how to implement scrolling while draggin an item ? like a tolerance on the bottom or top and when you reach it it will scroll up or down the list ?
This is so helpful. And I have a query. Is it possible to have a list of custom made ng components and make them drag and drop inside the container? I tried to do it but I failed in it. I'm not able to pass the previous and current index of the list item to the drop function. Note i'm not using ngFor for repeating a single div instead I used multiple divs which in turn holds my custom component. If you have any tips or suggestion on it let me know. Thanks
Each component would have to know what's going on so you'd have to pass information for the event handlers. You could pass info using the Input/Output or create Service and store your shared functions there, then inject the function into each component. If you're unsure try working with Input/Output event emitters.
Short answer is yes - on the drop event you could check the location of the mouse. I'm not sure why you would want to do that because that x,y co-ord is just 1 tiny pixel. You'd have to calculate a region (like top left, top right, bottom right, bottom left) to see if it dropped in that area ... so it's better to place an element on the page and use it as a drop-zone.
So what if I get my data from an external mongodb database? like I receive an ITodoItem[] and want to drag and drop and change the priority of them. How do I do that?
i want to create seat layout for movie ticket booking as each screen has different seating arrangement .how do i create such layouts and store them in backend so that any user visit site i can show them layout .can any one help me in this regard?
is there a way to save/persist the drop location on a refresh? I want to drag some items around and have the page remember where I left them when I refresh the page
i got the error plse giive a solution ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "cdkDropList" (" installed cdk and imported import {CdkDragDrop, moveItemInArray,CDK_DROP_LIST,transferArrayItem} from '@angular/cdk/drag-drop'; and uploade in app.module.ts as import { DragDropModule } from '@angular/cdk/drag-drop';
If you're using the cdk you'll want to do it the cdk way .. it connect to 'lists' using the 'connected-to' and that does the job for you. If you're not using ng7 then sure can make something with vanilla javascript.
![Angular CDK - Portal Module [Advanced, 2021]](/img/1.gif)
I should really stop thinking that everything is so complicated before I start it.
Thanks for your tutorial mate, I couldn't of done it without you!
I think you may have just gotten me a job lol this was the last piece I was missing for an interview project! Thanks so much. Great video.
why on earth would anybody dislike this gem?
If I am not mistaken, when this example is completed, dragging items within just the first list (“numbers”) still works but dragging items within the second list (“otherNumbers”) causes items in the first list to move instead of the within the second list. Seemingly, this behavior can be corrected by changing the first argument in moveItemInArray method from this.numbers to event.container.data like Stephen mentioned at 5:05 seems to correct this behavior. I am new to this drag-and-drop so please correct me if there is a better deal with this. I realize this was just meant to be a very quick demo and not comprehensive one … thanks for the example!
Great job explaining it man, much appreciated !
Very cool examples. Is there a possibility that you can show drag and drop in the mat-grid-list as shown in the blogpost of the release of angular 7?
Thank you for the great tuto. I don't try it yet. Will it be persistent? I mean after reloqding the page will the droped items will remain in place do I need additional work like storing index in database to make it persistent?
Hi Stephen, As usual an awesome articulation from your end. You ease learning process.
I am developing a complex header with Authorization and dynamic menu items and trying to expose this as angular elements but the features fail in IE although I have necessary polyfills, if I somehow fix this then it fails in chrome. Was really expecting v7 to solve the elements packaging and polyfills issues. Could you provide some pointers. Any help is really appreciated.
Thanks for the feedback! Regarding your IE Angular Elements issue, you should file an issue on github.com/angular/angular to let us know, with the specifics, then we can follow up and work on it.
Great, great video> I have a question though. How can I disable the sorting while dragging? Is it possible? Thanks in advanced
You can do that and all kinds of other customizations: material.angular.io/cdk/drag-drop/overview
As usual, a very great job! Thank you!
what OS do you use ? thanks
He is using Kubuntu.
@@user-if1de8pt2j Kubuntu is a different flavor of the popular open-source Linux operating system, Ubuntu.
@@user-if1de8pt2j If you *REALLY* need a Mac, get one, it serves to be a strong machine for many dev things. Otherwise, you can do the same thing on a Windows or Linux system.
@@user-if1de8pt2j There is a Windows NVM here -> github.com/coreybutler/nvm-windows.
As for Docker you can either use VirtualBox or use Vagrant (which is primarily the same thing), and Vagrant runs on windows. If you really do want Docker for Windows, it is available for Windows 10 Home. -> stackoverflow.com/questions/44406422/docker-installation-issues-on-windows-10-home-edition#answer-44406499
For node-sass you can try the StackOverflow answer here -> stackoverflow.com/questions/46953808/node-sass-installation-issue-on-windows-10#answer-46977724.
Windows needs a lot of configuration to get things to work, that's one of the great pains of working with Windows. Linux provides a different, more stable (and probably closer to Mac) configs as possible. Mac is well, Mac. Many devs use it, and I believe are quite happy with it.
@@user-if1de8pt2j for me node-sass is working on windows without any problems
Hey there, I just tried the steps & everything works fine.
But am facing issue when the list is large & while dragging a card, it's not autoscrolling. Any idea how we can fix that.
Even though on angular material website, all the demos have autoscrolling working.
in the video he registers a drop event on the html, which is bound back to the component. i tried doing the same thing - dragging files into an area. however, i don't see my component method firing... any other wiring needed?
Very cool, same examples of UX that a user might need such functionality?
Can you combine this drag and drop with virtual scroll?
Great video. Can this functionality drag a selection of items at once?
Short answer is yes. Remember Angular is MVVC-ish.. if you can't tackle the problem from the view, you can do it from the controller. In your case whatever item is selected could be added to an array and the array is set a the 'draggable'.
do you have an idea how to implement scrolling while draggin an item ? like a tolerance on the bottom or top and when you reach it it will scroll up or down the list ?
Great video. Thanks for demoing such cool thing in angular. Can we program this to drag and drop multiple items.
This is so helpful. And I have a query. Is it possible to have a list of custom made ng components and make them drag and drop inside the container? I tried to do it but I failed in it. I'm not able to pass the previous and current index of the list item to the drop function. Note i'm not using ngFor for repeating a single div instead I used multiple divs which in turn holds my custom component. If you have any tips or suggestion on it let me know. Thanks
Each component would have to know what's going on so you'd have to pass information for the event handlers. You could pass info using the Input/Output or create Service and store your shared functions there, then inject the function into each component. If you're unsure try working with Input/Output event emitters.
Great demo, thank you!
Thanks. Do we have functionality to drag and copy?
Short and nice video. Can we drop element at specific position for example at the mouse pointer {x,y}position.
Short answer is yes - on the drop event you could check the location of the mouse. I'm not sure why you would want to do that because that x,y co-ord is just 1 tiny pixel. You'd have to calculate a region (like top left, top right, bottom right, bottom left) to see if it dropped in that area ... so it's better to place an element on the page and use it as a drop-zone.
Can CDK DragDrop be used to drag-to-select items in a table or list?
how would you dynamically create cdkDropList containers from an array of container attributes?
So what if I get my data from an external mongodb database? like I receive an ITodoItem[] and want to drag and drop and change the priority of them. How do I do that?
i want to create seat layout for movie ticket booking as each screen has different seating arrangement .how do i create such layouts and store them in backend so that any user visit site i can show them layout .can any one help me in this regard?
I want the scroll bar working with the drag drop functionality
Great video :)
@4:40 the data model doesn't update for me. [cdkDropListData]="numbers" is how to update the source data.
can i have a list conected to multiple lists?
Does this work for mat-table?
is there a way to save/persist the drop location on a refresh? I want to drag some items around and have the page remember where I left them when I refresh the page
the easiest way to solve this would be LocalStorage. The data will be saved on your machine.
Awesome demo
This is great man. 😁
as soon as i saw the intro i pressed like. No way hes bad. And i was right :) gg mate
How can we do nested Lists? For e.g. having a list of n elements Inside of a list. That could itself be moved in one piece.
You'd set not the LI (list items) to be draggable, but the UL.. the parent HTML element.
this was amazing
How to create an interactive ERD diagram with this i wonder?
i got the error plse giive a solution
ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "cdkDropList" ("
installed cdk and imported
import {CdkDragDrop, moveItemInArray,CDK_DROP_LIST,transferArrayItem} from '@angular/cdk/drag-drop'; and uploade in app.module.ts as import { DragDropModule } from '@angular/cdk/drag-drop';
How to set the position of items with localhost Data?
I want to copy layout not move , Can U help me plz
PowerHouse Angular 😎
hi is thier a method to just copy the array instead of transfer could youe please help with this
If you're using the cdk you'll want to do it the cdk way .. it connect to 'lists' using the 'connected-to' and that does the job for you. If you're not using ng7 then sure can make something with vanilla javascript.
Amazing learn!
awesome
Typing like a crazy)
Dude ur a fucking g!!!!
Slow down.. you are too fast...