{"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":"http:\/\/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<p>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 <a href=\"https:\/\/material.angular.io\/cdk\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular CDK<\/a> (Component Development Kit).<\/p>\n\n\n\n<p>Let&#8217;s say we have a list of items we want to be able to reorder using drag and drop:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"664\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/dragdrop.gif\" alt=\"\" class=\"wp-image-1589\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Thanks to the <a href=\"https:\/\/material.angular.io\/cdk\" target=\"_blank\" rel=\"noopener\" title=\"\">CDK drag-and-drop directives<\/a>, such a task is easy. Here&#8217;s all the code needed to enable it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"162\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-74.png\" alt=\"\" class=\"wp-image-1590\" srcset=\"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-74.png 778w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-74-300x62.png 300w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-74-768x160.png 768w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The two directives <code>cdkDropList<\/code> and <code>cdkDrag<\/code> enable the drag-and-drop feature. We also need the following code in our component class:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"312\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-75-1024x312.png\" alt=\"\" class=\"wp-image-1591\" srcset=\"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-75-1024x312.png 1024w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-75-300x92.png 300w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-75-768x234.png 768w, http:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-75.png 1065w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The <a href=\"https:\/\/material.angular.io\/cdk\/drag-drop\/api#functions\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>moveItemInArray<\/code> function<\/a> is a utility function from the CDK, so we don&#8217;t have to worry about that.<\/p>\n\n\n\n<p>See the <a href=\"https:\/\/stackblitz.com\/edit\/dkabhj?file=src%2Fexample%2Fcdk-drag-drop-sorting-example.html,src%2Fexample%2Fcdk-drag-drop-sorting-example.ts\" target=\"_blank\" rel=\"noopener\" title=\"\">source code and try this example in action on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s say we have a list of items we want to be able to reorder using drag and drop: Thanks to the CDK [&hellip;]<\/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":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1588"}],"version-history":[{"count":2,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1588\/revisions"}],"predecessor-version":[{"id":1593,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1588\/revisions\/1593"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1588"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}