In this Repo, I have made an DragDrop App specially designed in TypeScript.
TypeScript step-by-step implementation shared as in below table.
| Concept | File Information |
|---|---|
| DOM Element Selection & OOP Rendering | 01-dom-rendering.ts |
| Interacting with DOM Elements | 02-interact-Dom.ts |
| Creating & Using an "Autobind" Decorator | 03-usingDecorator.ts |
| Fetching User Input | 04-Fetching-Input.ts |
| Creating a Re-Usable Validation Functionality | 05-adding-validation.ts |
| Rendering Project Lists | 06-Rendering-Lists.ts |
| Managing Application State with Singletons | 07-Manage-AppState.ts |
| More Classes & Custom Types | 08-Classes-Custom-Types.ts |
| Filtering Projects with Enums | 09-Filtering-Projects.ts |
| Adding Inheritance & Generics | 10-Adding-InheritanceGenerics.ts |
| Rendering Project Items with a Class | 11-RenderProjItems.ts |
| Using a Getter | 12-UsingGetter.ts |
| Utilizing Interfaces to Implement Drag & Drop | 13-InterfaceForDrag-Drop.ts |
| Drag Events & Reflecting the Current State in the UI | 14-DragEvent-Update-State-UI.ts |
| Adding a Droppable Area | 15-Adding-DroppingArea.ts |
| Finishing Drag & Drop | 16-FinishingDragDrop.ts |