- Angular project using the @angular/cdk/drag-drop module to drag numbered boxes from a list on the left to a numbered list on the right and vice versa.
- Tutorial code from Demos With Angular but with updates due to updated Angular/Material versions - see 👏 Inspiration below
- Note: to open web links in a new window use: ctrl+click on link
- "The @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."
- Run
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. - Run
ng buildto build the project. The build artifacts will be stored in thedist/directory. Use the--prodflag for a production build.
- Function to move numbered blocks from 1 list to another.
drop(event: CdkDragDrop<number[]>) {
console.log(event.previousContainer.data); // initially returns array (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(event.container.data); // initially returns []
if (event.previousContainer !== event.container) { // check to see if moved across lists
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
} else { // move within the same array and change index
moveItemInArray(
this.numbers,
event.previousIndex,
event.currentIndex
);
}
}- Drag and drop functionality - from one list to the other (with certain restrictions - e.g. you cannot move an active item back to the new items list).
- Items can be rearranged in their lists.
- Transitions used between lists
- Status: Working
- To-Do: nothing
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@gmail.com