@skutam/drag-drop-layout
v1.1.1
Published
Angular library that uses CSS grid for dragging and resizing elements.
Downloads
5
Maintainers
Readme
Angular drag drop layout
Angular Drag Drop Layout is a lightweight, dependency-free Angular library for creating highly customizable, responsive grid layouts with drag-and-drop functionality. Built with Angular 18 and utilizing Angular Signals, this library provides a seamless and optimized experience for building dynamic and interactive layouts.
View Demo
Features
- No External Dependencies: Pure Angular solution with no additional dependencies.
- Optimized Performance: Built with Angular 18 and Angular Signals for efficient change detection and rendering.
- Responsive Grid Layout: Flexible CSS grid-based layout that adapts to various screen sizes.
- Draggable Items: Easily move items within the grid or between multiple grids.
- Drag and Drop Between Grids: Supports dragging items from one grid to another with ease.
- Custom Drag Handles: Assign custom drag handles to control draggable areas within items.
Installation
npm install @skutam/drag-drop-layout
Usage
- Import the
DragDropLayoutModule
in your module.
import { DragDropLayoutModule } from '@skutam/drag-drop-layout';
@NgModule({
declarations: [
AppComponent
],
imports: [
DragDropLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Use the
ddl-grid
andddl-item
components in your template.
<div class="drag-items" ddlDragItems [grids]="[grid]">
<div ddlDragItem
class="drag-item"
[draggable]="true"
[disabled]="i == 1"
[width]="2"
[height]="2"
[dragData]="i"
*ngFor="let dragItem of dragItems; let i = index">{{dragItem}}</div>
</div>
<ddl-grid [columns]="columns" #grid class="grid"
[rows]="rows"
[colGap]="colGap"
[rowGap]="rowGap"
(itemDropped)="itemDropped($event)"
[(items)]="items">
<ddl-item *ngFor="let item of items; trackBy: itemTrackBy" [resizeTypes]="resizeTypes">
<div class="item-info">{{item.id}} [{{item.x}},{{item.y}}] ({{item.width}},{{item.height}})</div>
<span class="item-info-data">{{item.data}}</span>
<div ddlDragHandle class="drag-handle">Handle</div>
</ddl-item>
</ddl-grid>
- Define the grid and items in your component.
import { Component } from '@angular/core';
import { Item, ResizeType, GridItemDroppedEvent } from '@skutam/drag-drop-layout';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public columns = 12;
public rows: number = 4;
public colGap: number = 20;
public rowGap: number = 20;
public items: Item[] = [
new Item(null, 6, 2, 2, 2, 'Item 0 | TOP'),
new Item(null, 2, 2, 2, 1, 'Item 1 | TOP'),
new Item(null, 11, 3, 1, 2, 'Item 2 | TOP'),
];
public resizeTypes: ResizeType[] = ['bottom-right', 'right', 'top-left', 'left', 'bottom-left', 'top', 'bottom', 'top-right'];
public dragItems: string[] = ['Item 1', 'Item 2', 'Item 3'];
public itemDropped(event: GridItemDroppedEvent): void {
console.log(event);
}
protected readonly itemTrackBy = itemTrackBy;
protected readonly RESIZE_TYPES: ResizeType[] = ['top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left'];
}
Development
- Clone the repository
git clone [email protected]:skutam/angular-drag-drop-layout.git
cd angular-drag-drop-layout
- Install the dependencies
npm install
- Start the watch mode for the library
npm run watch:lib
- Serve the demo application
npm run serve:client