Ngx Drag Drop screenshot

Ngx Drag Drop

Author Avatar Theme by Reppners
Updated: 11 Jul 2025
323 Stars

Angular directives using the native HTML Drag And Drop API

Overview

NgxDragDrop is a powerful Angular directive that leverages the HTML5 Drag-and-Drop API to allow for flexible and declarative drag-and-drop functionality in web applications. With a focus on usability and compatibility, this module makes it straightforward to implement drag-and-drop operations for various types of elements and structures, such as sortable lists and nested drop zones. Its versatility enables developers to enhance user experiences with interactive features that seamlessly integrate into their applications.

What stands out about NgxDragDrop is not only its rich set of features but also its commitment to cross-browser compatibility. It addresses common issues and limitations found in drag-and-drop functionalities across different browsers, ensuring a consistent performance. This makes it an ideal choice for anyone looking to add drag-and-drop capabilities to their Angular projects without the hassle of dealing with browser discrepancies.

Features

  • Declarative Drag and Drop: Easily implement drag-and-drop functionality using Angular directives with minimal setup, allowing for clean and maintainable code.
  • Cross-Browser Support: Designed to function consistently across major browsers, avoiding common pitfalls associated with the HTML Drag-and-Drop API.
  • Nestable Drop Zones: Support for nesting drop zones provides a flexible way to organize and categorize draggable items.
  • External Draggables: Optionally support native HTML elements (like images and files) as drag sources, increasing integration options.
  • Touch Support: Mobile-friendly with touch support through a polyfill, broadening usability for mobile applications.
  • Custom CSS Classes: Utilize custom styling for drag-and-drop elements, giving developers full control over the UI appearance.
  • AOT Compatibility: Built to work seamlessly with Angular Ahead-of-Time compilation, enhancing performance for production builds.