{"id":1588,"date":"2023-10-05T05:00:00","date_gmt":"2023-10-05T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1588"},"modified":"2023-09-28T14:52:57","modified_gmt":"2023-09-28T21:52:57","slug":"how-to-handle-drag-and-drop-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-handle-drag-and-drop-with-angular\/","title":{"rendered":"How to handle drag-and-drop with Angular?"},"content":{"rendered":"\n

Drag and drop features can dramatically improve the UX of a web application. Implementing drag and drop with Javascript seems intimidating, which is why we have the Angular CDK<\/a> (Component Development Kit).<\/p>\n\n\n\n

Let’s say we have a list of items we want to be able to reorder using drag and drop:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Thanks to the CDK drag-and-drop directives<\/a>, such a task is easy. Here’s all the code needed to enable it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The two directives cdkDropList<\/code> and cdkDrag<\/code> enable the drag-and-drop feature. We also need the following code in our component class:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The moveItemInArray<\/code> function<\/a> is a utility function from the CDK, so we don’t have to worry about that.<\/p>\n\n\n\n

See the source code and try this example in action on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Drag and drop features can dramatically improve the UX of a web application. Implementing drag and drop with Javascript seems intimidating, which is why we have the Angular CDK (Component Development Kit). Let’s say we have a list of items we want to be able to reorder using drag and drop: Thanks to the CDK […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,34,8],"tags":[],"class_list":["post-1588","post","type-post","status-publish","format-standard","hentry","category-angular","category-cdk","category-components"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t