🚀 ngx-drag-drop-kit

Advanced & blazing-fast Angular Drag & Drop Toolkit — Grid, Sort, Resize, Nesting, and more!

Live Demo

✨ Features

• 🖱️ Advanced Drag & Drop with multi-list and cross-list support
• 🧩 Configurable & Responsive Grid Layout
• 📏 Resizable: Resize items with mouse
• 🔄 Sortable List: Reorder items via Drag & Drop
• ➡️ Horizontal List: Horizontal drag & drop
• 🌳 Nested Tree Sort: Tree structure sorting
• 🗃️ Copy to Zone: Copy items to another zone
• 🧲 Snap to Grid
• 🛡️ Boundary: Set boundaries for drag/resize
• 🖼️ Custom Placeholder
• ⚡ Performance Optimized and Ultra lightweight
• 🧑‍💻 Fully modular, Angular 18+ ready
• 🧩 Modular: Drag & Drop, Grid, Sortable, Resizable

🔧 Installation

npm install ngx-drag-drop-kit

Or:

yarn add ngx-drag-drop-kit

⚡ Quick Start

import { NgxDragDropKitModule } from 'ngx-drag-drop-kit';

@NgModule({
  imports: [NgxDragDropKitModule]
})
export class AppModule {}

📚 Usage Highlights

✅ Basic Drag & Drop

<div ngxDropList [data]="list" (drop)="drop($event)">
  <div ngxDraggable *ngFor="let item of list">{{ item }}</div>
</div>

import { IDropEvent, moveItemInArray, transferArrayItem } from 'ngx-drag-drop-kit';

drop(event: IDropEvent) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
  }
}

🧩 Grid Layout

import { NgxGridLayoutModule } from 'ngx-drag-drop-kit';

@NgModule({
  imports: [NgxGridLayoutModule]
})
export class AppModule {}

<grid-layout [options]="options">
  <grid-item *ngFor="let item of layouts" [config]="item.config">
    {{ item.title }}
  </grid-item>
</grid-layout>

import { IGridLayoutOptions, GridItemConfig } from 'ngx-drag-drop-kit';

options: IGridLayoutOptions = { cols: 12, gap: 10 };
layouts = [
  { config: new GridItemConfig(0, 0, 2, 2), title: 'Item 1' },
  ...
];

📏 Resizable

<div ngxResizable [minWidth]="50" [minHeight]="50" (resize)="onResize($event)">
  Resizable!
</div>

🌳 Nested Drag & Drop Tree

Supports multi-level tree-like structures with drag & drop:

<ng-template #tree let-items>
  <div ngxDropList [data]="items" (drop)="drop($event)">
    <div *ngxPlaceholder class="custom-placeholder"></div>
    <div ngxDraggable *ngFor="let item of items">
      {{ item.name }}
      <ng-container *ngIf="item.children">
        <ng-container
          [ngTemplateOutlet]="tree"
          [ngTemplateOutletContext]="{ $implicit: item.children }">
        </ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>

📄 API Summary

📦 Demos & Examples

See working examples in the projects/demo folder.

💖 Support / Sponsor

Maintaining open-source libraries takes time and energy. If you find this project useful, please consider supporting me:

☕ One-time Donation

🧡 Monthly Sponsorship

💸 Crypto Support

You can also support via Tether (USDT) or Bitcoin (BTC):

• BTC: bc1qnhnpn9dtk3det08hkpduv8x9u8rnesujplg0p2
• Ethereum: 0x3891395BB3f6c4642f6C7001FDD9113F22065680
• TRON: TRJ7a8npXFzkfDLfwsRz2CCH1GWHuuthaJ
• TON: UQAejnuN0MUM8zxsbUsLYtCB79gl88NDSGbv6OYzly4h4yfT

Message me or create an issue if you want to be listed as a sponsor.

🤝 Contributing

Pull requests welcome 🙌

git clone https://github.com/mr-samani/ngx-drag-drop-kit.git
cd ngx-drag-drop-kit
npm install
npm run start

📜 License

MIT — feel free to use & modify.

Built with ❤️ in Iran – by @mr-samani