Angular Drag and Drop sorting grid
Angular directive that allows you to build any type of sortable array HTML structure using native JavaScript mouse events.
StackBlitz
DemoUpcoming updates
- Responsiveness: make this code mobile-friendly;
- Animations: animate transitions between old and new positions; (done v1.2.0)
- Usability: make pure JavaScript version of code.
- Functionality: Dragging from one Array to the other
Want to contribute?
Make a pull request!
Getting started
- Getting started - installation
- [Guide - how to use (live examples)](#How to use)
- [Example #1 - flexbox](
#Example #1
) - [Example #2 - toggable drag & drop](
#Example #1
) - [Example #3 - reorder callback + update array](
#Example #1
)
- [Example #1 - flexbox](
Installation
#1 Install package
Run npm install @rr2/drag-n-drop --save
#2 Implement package
Add DragNDropModule
to in your module.ts file
...
import {DragNDropModule} from '@rr2/drag-n-drop';
@NgModule({
declarations: [
...
],
imports: [
...
DragNDropModule
],
providers: [
...
],
bootstrap: [
....
]
})
How to use
live demo
Example #1Most simple example using *ngFor
and display: flex
In your component file
@Component({
...
})
export class ... {
...
yourArray = [
{name: '1'},
{name: '2'},
{name: '3'},
{name: '4'},
{name: '5'},
];
...
}
In your template file:
<div [dragNDrop]="{array: yourArray, enabled: true}" style="display: flex; flex-wrap: wrap;">
<div *ngFor="let element of yourArray;">
<!-- Here goes HTML of the element which is sortable -->
<div style="width: 25%; height: 150px; background: purple;">{{ element.name }}</div>
</div>
</div>
live demo
Example #2Toggleable drag and drop with some animations and more styling
live demo
Example #3Reorder callback
To use re-oder callback add (reorder)="<callback>"
to dragNDrop
html element with directive.
Callback event returns object of array index change {from: number, to: number}
<div [dragNDrop]="{array: items, enabled: drag}" (reorder)="onReorder($event)">
Create method in the component
onReorder(indexChange: {from: number, to: number}) {
console.log('Index changed:', indexChange);
}
Modifying array dynamically
After adding or removing element to array, call updateArray()
function from the directive.
...
import { DragNDropDirective } from '@rr2/drag-n-drop';
@Component({
...
})
export class ... {
@ViewChild(DragNDropDirective) dragNDropDirective;
...
add() {
... // Add element
this.dragNDropDirective.updateArray();
}
remove() {
... // Remove element
this.dragNDropDirective.updateArray();
}
}