Angular 7

Angular 7 Drag & Drop with Handle and Sorting Example

To work with Drag & Drop with Handle and Sorting, we need to install the Angular CDK package to import the DragDropModule module. 

For Angular 7 Virtual Scrolling (ScrollingModule) explore this link...

Install the module using NPM - npm install @angular/cdk@latest
Helper methods for reordering or transferring items in lists and looks like.
1.            moveItemInArray
2.            transferArrayItem

For Drag and Drop Options i.e.
1.      Basic Drag and Drop
2.      Drag and Drop with custom Drag Handle
3.      Drag and Drop with Sorting
4.      Transfer items between the lists
5.      Drag and Drop with different Orientation
6.      Locking with axis

Example -
Import DragDropModule in NgModule - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { DataTablesModule } from 'angular-datatables';

//Scrolling and drag-drop Module
import { ScrollingModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DataTablesModule,
    ScrollingModule, //Scrolling Module
    DragDropModule //DragDrop Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts -

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 7 New Features – Drag and Drop Example with Sorting and Handle';
  dragDropItems = ['Box 1', 'Box 2', 'Box 3', 'Box 4', 'Box 5', 'Box 6', 'Box 7', 'Box 8'];

  constructor() { }

  onDragDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.dragDropItems, event.previousIndex, event.currentIndex);
  }
}

app.component.html -
<h2>Angular 7 - Drag & Drop Example with Handle and Sorting </h2>
<div class="box" cdkDrag>Hi there, Drag me!</div>
<div cdkDropList (cdkDropListDropped)="onDragDrop($event)">
  <div class="box" *ngFor="let ddItem of dragDropItems" cdkDrag>{{ddItem}}</div>
</div>

app.component.css -
/*CSS for Drag and Drop */
  .box {
    border: 1px solid rgb(169,169,169);
    padding: 22px;
    width: 500px;
    background-color:blueviolet;
    color: white;
  }
  
  .cdk-drop-dragging .cdk-drag {
    transition: transform 501ms cubic-bezier(0, 0, 0.3, 1);
  }
  
  .cdk-drag-animating {
    transition: transform 550ms cubic-bezier(0, 0, 0.3, 1);
  }
  
  .cdk-drag-placeholder {
    background-color: Highlight;
  }


For the source code, email me at - anil.singh581@gmail.com
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 7 Drag & Drop with Handle and Sorting Example Angular 7 Drag & Drop with Handle and Sorting Example Reviewed by Anil Singh on 11:30 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^