{"id":21231634,"url":"https://github.com/piyalidas10/angular-material-drag-drop-with-sorting","last_synced_at":"2026-05-18T03:11:16.431Z","repository":{"id":120845497,"uuid":"427017144","full_name":"piyalidas10/Angular-Material-Drag-Drop-with-Sorting","owner":"piyalidas10","description":"Drag Drop with Sorting using Angular Material CDK","archived":false,"fork":false,"pushed_at":"2021-11-14T13:34:51.000Z","size":1234,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T10:37:27.443Z","etag":null,"topics":["angular","angular-material","drag-and-drop","sorting"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-11-11T13:47:26.000Z","updated_at":"2024-11-22T00:10:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"72a411d8-1e8d-46e3-bd50-3b44c306c27c","html_url":"https://github.com/piyalidas10/Angular-Material-Drag-Drop-with-Sorting","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Angular-Material-Drag-Drop-with-Sorting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Material-Drag-Drop-with-Sorting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Material-Drag-Drop-with-Sorting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Material-Drag-Drop-with-Sorting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Material-Drag-Drop-with-Sorting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Angular-Material-Drag-Drop-with-Sorting/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Material-Drag-Drop-with-Sorting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33163441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","drag-and-drop","sorting"],"created_at":"2024-11-20T23:47:44.328Z","updated_at":"2026-05-18T03:11:16.426Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Exploring Drag and Drop with the new Angular Material CDK\nhttps://material.angular.io/cdk/drag-drop/overview\n\nThe @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and locking along an axis.\n\n![Drag Drop](dragdrop.gif)\n\n### Installation\n\nInclude the following in app.component.ts\n```\nimport {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';\n```\n\nAdd style in app.component.scss\n```\n.example-list {\n    width: 500px;\n    max-width: 100%;\n    border: solid 1px #ccc;\n    min-height: 60px;\n    display: block;\n    background: white;\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  \n  .example-box {\n    padding: 20px 10px;\n    border-bottom: solid 1px #ccc;\n    color: rgba(0, 0, 0, 0.87);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    cursor: move;\n    background: white;\n    font-size: 14px;\n    span{\n        background-color: #CC0000;\n        color: #ffffff;\n        width: 24px;\n        height: 24px;\n        text-align: center;\n        font-size: 15px;\n        line-height: 24px;\n    }\n  }\n  \n  .cdk-drag-preview {\n    box-sizing: border-box;\n    border-radius: 4px;\n    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n                0 8px 10px 1px rgba(0, 0, 0, 0.14),\n                0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  }\n  \n  .cdk-drag-placeholder {\n    opacity: 0;\n  }\n  \n  .cdk-drag-animating {\n    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n  }\n  \n  .example-box:last-child {\n    border: none;\n  }\n  \n  .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {\n    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n  }\n```\n\nNeed to add \"DragDropModule\" in \"app.module.ts\" so it is available for use in the Angular Application like so:\n```\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport {CommonModule} from '@angular/common';\nimport { AppComponent } from './app.component';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { HttpClientModule } from '@angular/common/http';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    CommonModule,\n    NoopAnimationsModule,\n    DragDropModule,\n    HttpClientModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n### Normal Drag and Drop\n\nThe MoveItemsInArray method takes three parameters:\n\nThe list array where it would do the sort work\n1. \"event.previousIndex\" which is the previous index of the dragged item to drop.\n2. \"event.currentIndex\" which is the current index where the dragged item is being dropped so it can do the swap.\n\napp.component.html\n```\n\u003cdiv cdkDropList class=\"example-list\" (cdkDropListDropped)=\"drop($event)\"\u003e  \n          \u003cdiv class=\"example-box\" *ngFor=\"let movie of movies\" cdkDrag\u003e\n            \u003cspan\u003e{{movie.order}}\u003c/span\u003e {{movie.name}}\u003c/div\u003e\n        \u003c/div\u003e\n```\napp.component.ts\n```\nimport {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';\n\ndrop(event: CdkDragDrop\u003cstring[]\u003e) {\n    console.log(event);\n    console.log(event.previousIndex, event.currentIndex);\n    moveItemInArray(this.movies, event.previousIndex, event.currentIndex)\n    this.updateDataForMoveItem(this.movies);\n  }\n\n  updateDataForMoveItem(data) {\n    data.forEach((elem: any, index: number) =\u003e {\n      elem.order = index + 1;\n    });\n    console.log('Updated data array =\u003e ', data);\n  }\n```\n\n1. cdkDropList directive for making draggable content\n2. cdkDropListDropped event for moving list items up and down a list\n3. moveItemsInArray method to re-order the list\n4. updateDataForMoveItem method to update the list with order no, so if required you can send the data to database for saving\n\n### Transferring Items between lists\nThe cdkDropList directive supports transferring dragged items between two or more lists.\nYou can connect one or more cdkDropList instances together by setting the cdkDropListConnectedTo property or by wrapping the elements in an element with the cdkDropListGroup attribute.\n\napp.component.html\n```\n\u003cdiv class=\"col-sm-6\"\u003e\n            \u003cdiv\n              cdkDropList\n              #todoList=\"cdkDropList\"\n              [cdkDropListData]=\"todo\"\n              [cdkDropListConnectedTo]=\"[doneList]\"\n              class=\"example-list\"\n              (cdkDropListDropped)=\"dropTransfer($event)\"\u003e\n              \u003cdiv class=\"example-box\" *ngFor=\"let item of todo\" cdkDrag\u003e\u003cspan\u003e{{item.order}}\u003c/span\u003e {{item.name}}\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-6\"\u003e\n            \u003cdiv\n              cdkDropList\n              #doneList=\"cdkDropList\"\n              [cdkDropListData]=\"done\"\n              [cdkDropListConnectedTo]=\"[todoList]\"\n              class=\"example-list\"\n              (cdkDropListDropped)=\"dropTransfer($event)\"\u003e\n              \u003cdiv class=\"example-box\" *ngFor=\"let item of done\" cdkDrag\u003e\u003cspan\u003e{{item.order}}\u003c/span\u003e {{item.name}}\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n```\n\n1. cdkDropList directive supports transferring dragged items between connected drop zones\n2. cdkDropListData specifies for each list seperately\n3. cdkDropListConnectedTo property or by wrapping the elements in an element with the cdkDropListGroup attribute\n4. You can associate some arbitrary data with both cdkDrag and cdkDropList by setting cdkDragData or cdkDropListData, respectively. Events fired from both directives include this data, allowing you to easily identify the origin of the drag or drop interaction.\n\ndropTransfer function to move the items from one list to another list.\n```\ndropTransfer(event: CdkDragDrop\u003cstring[]\u003e) {\n    console.log(event);\n    if (event.previousContainer === event.container) {\n      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n      this.updateDataForMoveItem(event.container.data);\n    } else {\n      transferArrayItem(\n        event.previousContainer.data,\n        event.container.data,\n        event.previousIndex,\n        event.currentIndex,\n      );\n      this.updateDataForTransferItem(event.previousContainer.data, event.container.data);\n    }\n  }\n```\n\nNow i have to update the array to show by order properly\n```\n updateDataForTransferItem(prevData, currData) {\n    prevData.forEach((elem: any, index: number) =\u003e {\n      elem.order = index + 1;\n    });\n    currData.forEach((elem: any, index: number) =\u003e {\n      elem.order = index + 1;\n    });\n    console.log('Updated previous data =\u003e ', prevData);\n    console.log('Updated current data =\u003e ', currData);\n  }\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-material-drag-drop-with-sorting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fangular-material-drag-drop-with-sorting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-material-drag-drop-with-sorting/lists"}