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.

Demo StackBlitz

Upcoming 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)

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

Example #1 live demo

Most 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>

Example #2 live demo

Toggleable drag and drop with some animations and more styling

Example #3 live demo

Reorder 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();
    }
}