https://github.com/mawalou14/angulardrag-drop

An Angular application showcasing drag-and-drop functionality with Angular Material and Tailwind CSS. Users can drag and drop video cards between three containers, dynamically updating their placement.
https://github.com/mawalou14/angulardrag-drop

angular angular-drag-and-drop angular-draggable-widget angular17 cards drag-and-drop signals

Last synced: 3 months ago
JSON representation

An Angular application showcasing drag-and-drop functionality with Angular Material and Tailwind CSS. Users can drag and drop video cards between three containers, dynamically updating their placement.

• Host: GitHub
• URL: https://github.com/mawalou14/angulardrag-drop
• Owner: mawalou14
• Created: 2024-08-02T17:05:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-02T17:34:32.000Z (almost 2 years ago)
• Last Synced: 2025-09-11T13:05:47.760Z (10 months ago)
• Topics: angular, angular-drag-and-drop, angular-draggable-widget, angular17, cards, drag-and-drop, signals
• Language: TypeScript
• Homepage:
• Size: 141 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Angular 17 Drag and Drop Tutorial

This project is part of a YouTube tutorial series demonstrating how to implement drag and drop functionality in an Angular 17 application. It provides a step-by-step guide to creating a simple yet interactive drag and drop interface using Angular Material's CDK.

![drag-drop1](https://github.com/user-attachments/assets/bb102294-81ec-452e-9785-0ba4683a581d)

## Overview

In this tutorial, we build a basic drag and drop application using Angular 17. The project serves as a practical example to help developers understand and implement drag and drop functionality in their own Angular applications.

## Features Covered

- Setting up an Angular 17 project

- Implementing drag and drop with Angular Material CDK

- Creating multiple drop containers

- Styling the interface with tailwindCss and basic CSS

- Handling drag and drop events

- Updating data models based on drag and drop actions

## Technologies Used

- Angular 17

- Angular Material

- Tailwind Css

- Angular CDK (Component Dev Kit)

- TypeScript

- HTML/CSS

## ScreenShots

![drag-drop1](https://github.com/user-attachments/assets/bb102294-81ec-452e-9785-0ba4683a581d)

![drag-drop2](https://github.com/user-attachments/assets/004bbce4-48e8-459d-babf-589bc82fbc6a)

## Running the Project

- clone the repository and move to the project's directory, using the command:

  ```bash

    git clone https://github.com/mawalou14/angularDrag-Drop.git

    cd angularDrag-Drop

  ```

- Then at the root of the project's directory tap the command:

  ```bash

    npm install

  ```

  This is to install all the project's packages.

- Start the development server:

  ```bash

    ng serve

  ```

- The app is available in you browser under **http://localhost:4200**