**Advanced & blazing-fast Angular Drag & Drop Toolkit** — Grid, Sort, Resize, Nesting, and more!
npm install ngx-drag-drop-kitbash
npm install ngx-drag-drop-kit
`
Or:
`bash
yarn add ngx-drag-drop-kit
`
---
⚡ Quick Start
`ts
import { NgxDragDropKitModule } from 'ngx-drag-drop-kit';
@NgModule({
imports: [NgxDragDropKitModule],
})
export class AppModule {}
`
Add Style
add ngx-drag-drop-kit style to your style.scss files
`
@use '@node_modules/ngx-drag-drop-kit/assets/styles.css';
`
- or add to styles section in angular.json
---
📚 Usage Highlights
$3
`html
{{ item }}
`
`ts
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);
}
}
`
$3
`ts
import { NgxGridLayoutModule } from 'ngx-drag-drop-kit';
@NgModule({
imports: [NgxGridLayoutModule],
})
export class AppModule {}
`
`html
{{ item.title }}
`
`ts
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' },
...
];
`
$3
`html
Resizable!
`
---
🌳 Nested Drag & Drop Tree
Supports multi-level tree-like structures with drag & drop:
`html
{{ item.name }}
`
---
📄 API Summary
| Directive/Component | Input/Output | Description |
| --------------------- | --------------------------- | ----------------------- |
| ngxDraggable | Input | Makes element draggable |
| | dragStart, dragEnd | Drag events |
| ngxDropList | Input: [data] | Drop zone array |
| | Output: (drop) | Drop event |
| ngxResizable | [minWidth], [minHeight] | Resizing constraints |
| | Output: (resize) | Emits size changes |
| NgxGridLayoutComponent | options | Grid options |
| NgxGridItemComponent | config | Grid item configuration |
---
📦 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:
$3
$3
$3
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 🙌
`bash
git clone https://github.com/mr-samani/ngx-drag-drop-kit.git
cd ngx-drag-drop-kit
npm install
npm run start
``