/angular-dragdrop-module

:clipboard: Angular app to learn about Drag and Drop module, following Youtube tutorial by 'Demos with Angular'

Primary LanguageTypeScriptMIT LicenseMIT

⚡ Angular Dragdrop Module

  • 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • "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."

📷 Screenshots

Example screenshot

📶 Technologies

💾 Setup

  • Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
  • Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

  • 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
      );
    }
  }

🆒 Features

  • 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 & To-Do List

  • Status: Working
  • To-Do: nothing

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact