Drag and Drop in Angular with Angular Material

Hello, in this video I will be talking about the Drag and Drop module from Angular Material.

The module allows us to easily apply drag and drop capabilities to any elements on the page.

We can move an element around the page, reorder items in a list, and even move items from one list to another.

0:00 - Start of Video
0:05 - Drag and Drop CDK
0:33 - Installing Angular Material & Adding the DragDropModule
1:34 - Drag and Drop
2:51 - Drag and Drop with Bounding Box
4:20 - Adding "Handles"
5:42 - Locking Axis
6:25 - Drag and Drop with Lists and Arrays
10:28 - Styling & Animation
12:50 - Horizontal Drop Lists
13:29 - Custom Previews with Image
14:09 - Linking Multiple Drop Lists using cdkDropListGroup
18:18 - Linking Multiple Drop Lists using cdkDropListConnectedTo

If you find this video helpful, please Like, Share, and Subscribe to support the channel!

Support Codeible on Patreon!

Reddit:

Follow on Pinterest:

Follow on Instagram:

Follow on Twitter:

[amandasimonds]

This tutorial saved my life today, thank you!!

[ثاقباعوان]

thanks alot sir, , , thankssss alot alot alot

[ArjunRaj-xnes]

Can we drag and drop items (both horizontally and vertically ) in a single list spreaded into rows and columns. ? Please share the code

[swapnild]

Nice Tutorial!
1 query
After dropping the item in "Done" array, can we keep it in the first array as well..
Like after dragging item from "To do" and dropping in "Done", can we keep that item in both the Arrays.

[massi]

Hi, can you adjust the sensitivity of the drag ?

[haseebsahi]

You need to show a little courtesy to your viewers by sharing the code you performed in the video.

Tutorials like these are of no use if you cannot provide the code of what you did in the video.

Because, after hours of hard-work while following along, at the end, it turns out that nothing is working on your end as it was in the tutorial.

And this happens because, as you know in Angular, there are hell lots of issue with versions, dependencies and packages etc.

So it is always best to test a code snippet by copy-pasting it in the codebase to know whether it's an optimal solution for your environment or not.

Followed all along but got nothing out of it. 3 hours wasted....