Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skutam/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.
https://github.com/skutam/angular-drag-drop-layout
angular drag-and-drop grid-layout lightweight resizable responsive
Last synced: 2 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/skutam/angular-drag-drop-layout
- Owner: skutam
- License: mit
- Created: 2024-06-07T00:50:48.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-08T00:05:36.000Z (14 days ago)
- Last Synced: 2024-09-08T14:39:54.283Z (13 days ago)
- Topics: angular, drag-and-drop, grid-layout, lightweight, resizable, responsive
- Language: TypeScript
- Homepage:
- Size: 612 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-drag-drop-layout - A lightweight, dependency-free Angular library for creating highly customizable, responsive grid layouts with drag-and-drop functionality. (Table of contents / Third Party Components)
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](https://skutam.github.io/angular-drag-drop-layout/)**
## 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
```bash
npm install @skutam/drag-drop-layout
```
## Usage
1. Import the `DragDropLayoutModule` in your module.
```typescript
import { DragDropLayoutModule } from '@skutam/drag-drop-layout';
@NgModule({
declarations: [
AppComponent
],
imports: [
DragDropLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
2. Use the `ddl-grid` and `ddl-item` components in your template.
```html
{{dragItem}}
{{item.id}} [{{item.x}},{{item.y}}] ({{item.width}},{{item.height}})
{{item.data}}
Handle
```
3. Define the grid and items in your component.
```typescript
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
1. Clone the repository
```bash
git clone [email protected]:skutam/angular-drag-drop-layout.git
cd angular-drag-drop-layout
```
2. Install the dependencies
```bash
npm install
```
3. Start the watch mode for the library
```bash
npm run watch:lib
```
4. Serve the demo application
```bash
npm run serve:client
```