How to implement drag and drop in Angular with ng-dnd?

Start by installing @ng-dnd/core via npm, import DndModule in your Angular module, and set up a backend like HTML5Backend. Use directives like dndDraggable and dndDropzone to define draggable elements and drop targets, following the core documentation for examples.

ng-dnd vs Angular CDK drag and drop: which is better?

Ng-dnd excels for custom, complex drag-and-drop behaviors and modern Angular features like zoneless support, while Angular CDK is more integrated with Material Design and suitable for standard components. Choose based on your need for modularity and Angular version compatibility.

How to create sortable lists with ng-dnd?

Use the @ng-dnd/sortable package to import sortable directives like dndSortableList and dndSortableItem. Handle sort events to update your data model, and refer to the sortable documentation for detailed examples and configuration options.

Does ng-dnd work with Angular 18 zoneless mode?

Yes, ng-dnd version 4.x is optimized for zoneless Angular applications from v18+, as shown in the compatibility table. It minimizes change detection overhead for better performance in zoneless setups.

How to handle touch events in ng-dnd?

Ng-dnd supports touch devices through its multi-backend system; import and configure the touch backend from @ng-dnd/multi-backend to enable drag-and-drop on mobile, ensuring cross-platform compatibility.

What are the differences between ng-dnd and angular-skyhook?

Ng-dnd adds support for Angular Ivy, updates dependencies to newer versions, improves API intuitiveness with better naming, and introduces zoneless support for Angular v18+, addressing the maintenance issues of angular-skyhook.

Open-Awesome

ng-dnd

MITTypeScriptv4.1.0

A modern, modular drag-and-drop toolkit for Angular applications with full Angular Ivy and zoneless support.

Visit Website GitHub

130 stars9 forks0 contributors

What is ng-dnd?

Ng DnD is a drag-and-drop library designed specifically for Angular applications. It provides a modular toolkit to implement complex drag-and-drop interactions, such as sortable lists and multi-backend support, while fully supporting Angular Ivy and zoneless mode. It solves the problem of outdated or incompatible drag-and-drop solutions in modern Angular ecosystems.

Target Audience

Angular developers building applications that require interactive drag-and-drop features, such as dashboards, admin panels, or content management systems.

Value Proposition

Developers choose Ng DnD for its modern Angular compatibility (including Ivy and zoneless support), modular architecture, and intuitive API, which address the maintenance and compatibility issues of earlier alternatives like angular-skyhook.

Overview

Drag and Drop for Angular

Use Cases

Best For

Adding drag-and-drop to Angular dashboards
Building sortable lists or grids in Angular apps
Implementing cross-platform drag-and-drop (HTML5 and Touch)
Migrating from angular-skyhook to a maintained library
Optimizing drag-and-drop performance in zoneless Angular applications
Creating custom drag-and-drop behaviors with a modular toolkit

Not Ideal For

Projects using React, Vue.js, or other non-Angular frameworks
Applications needing drag-and-drop with pre-styled, out-of-the-box UI components and minimal code
Simple use cases where native HTML5 drag-and-drop suffices and a library adds unnecessary complexity
Teams preferring all-in-one solutions over modular packages to reduce setup time

Pros & Cons

Pros

Modern Angular Compatibility

Fully supports Angular Ivy and zoneless applications from v18+, ensuring future-proofing and performance optimizations, as detailed in the compatibility table and key features.

Modular Package Design

Separated into @ng-dnd/core, @ng-dnd/multi-backend, and @ng-dnd/sortable packages, allowing lightweight imports and tailored functionality, mentioned in the modular packages section.

Intuitive API Improvements

Addresses frustrations with angular-skyhook by using clear naming for directives and properties, making the library more maintainable, as explained in the 'Why I create this project?' section.

Cross-Platform Support

Multi-backend system enables drag-and-drop on both desktop (HTML5) and touch devices, providing robust cross-platform compatibility, highlighted in the key features.

Cons

Documentation Fragmentation

Documentation is split across separate pages for core, multi-backend, and sortable, which can fragment the learning experience and require more navigation, as indicated by the multiple docs links in the README.

Setup Complexity for Basics

The modular architecture requires installing and configuring multiple packages, adding overhead for simple drag-and-drop needs compared to all-in-one libraries or native solutions.

Limited Ecosystem and Community

As a fork of the less-maintained angular-skyhook, ng-dnd may have a smaller community, fewer third-party extensions, and slower updates, which could impact long-term support.

Frequently Asked Questions

Related Projects

ngx-drag-drop

Angular directives using the native HTML Drag And Drop API

Build dashboards with Angular drag-and-drop

Stars188

Forks11

Last commit3 months ago

@hackingharold/ngx-dropzone

The missing file input component for Angular Material.

Stars56

Forks7

Last commit22 hours ago

angular-mixed-cdk-drag-drop

angular-mixed-cdk-drag-drop is an Angular Directive to support mixed orientation drag drop using angular cdk.

Stars32