Angular Bootstrap Sortable

Angular Sortable - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap sortable plugin is an extension that allows you to move, reorder, sort and organize elements on your website by using drag and drop functionality.

To start working with sortable plugin see "Getting Started" tab on this page.

Basic Example

Change the order of elements in the DOM tree by dragging the element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Show code

HTML
Typescript
SCSS

        
            
          <ul mdbSortableList class="list-group" (drop)="onDrop($event)">
            <li *ngFor="let item of sortableList" mdbSortable class="list-group-item">{{ item }}</li>
          </ul>

        
            
          import { Component } from '@angular/core';
          import { moveItemInList } from 'mdb-sortable';

          @Component({
            selector: 'sortable-example',
            templateUrl: './sortable-example.component.html',
          })
          export class SortableExampleComponent {
            sortableList = [
              'Item 1',
              'Item 2',
              'Item 3',
              'Item 4',
              'Item 5',
              'Item 6',
              'Item 7',
              'Item 8',
              'Item 9',
              'Item 10'
            ];

            onDrop(event: any) {
              moveItemInList(this.sortableList, event.oldIndex, event.newIndex);
            }
          }

        
            
            .mdb-sortable {
              user-select: none;
            }
            .mdb-sortable-placeholder {
              opacity: 0;
            }

Merging lists

Sorting items between two lists

Lion
Dog
Cat
Tiger

Fish
Bird
Falcon
Mouse

Show code

HTML
Typescript
SCSS

        
            
          <div class="row">
            <div class="col-md-6 mx-auto">
                <ul #list1="mdbSortableList" mdbSortableList [data]="sortableList1" [connectedWith]="[list2]" class="list-group w-100" (drop)="onDrop($event)">
                    <li *ngFor="let item of sortableList1" class="list-group-item" mdbSortable>{{ item }}</li>
                  </ul>
            </div>
            <div class="col-md-6 mx-auto">
                <ul #list2="mdbSortableList" mdbSortableList [data]="sortableList2" [connectedWith]="[list1]" class="list-group w-100" (drop)="onDrop($event)">
                  <li *ngFor="let item of sortableList2" class="list-group-item" mdbSortable>{{ item }}</li>
                </ul>
            </div>
          </div>

        
            
          import { Component } from '@angular/core';
          import { moveItemInList, moveItemToNewList } from 'mdb-sortable';

          @Component({
            selector: 'sortable-example',
            templateUrl: './sortable-example.component.html',
          })
          export class SortableExampleComponent {
            sortableList1 = [
              'Lion',
              'Dog',
              'Cat',
              'Tiger'
            ];

            sortableList2 = [
              'Fish',
              'Bird',
              'Falcon',
              'Mouse'
            ];

            onDrop(event: any) {
              if (event.previousList === event.currentList) {
                moveItemInList(event.previousList.data, event.oldIndex, event.newIndex);
              } else {
                moveItemToNewList(event.previousList.data,
                  event.currentList.data, event.oldIndex, event.newIndex);
              }
            }
          }

        
            
            .mdb-sortable {
              user-select: none;
            }
            .mdb-sortable-placeholder {
              opacity: 0;
            }

Display as grid

Displays items in a sortable grid - this can be used to determine the order in which photos or files are uploaded.

Show code

HTML
Typescript
SCSS

        
            
          <div mdbSortableList class="col-md-5 d-flex flex-center flex-wrap mt-5" (drop)="onDrop($event)">
            <div *ngFor="let item of sortableList" mdbSortable class="text-center white-text blue m-2 square">{{ item }}</div>
          </div>

        
            
          import { Component } from '@angular/core';
          import { moveItemInList, moveItemToNewList } from 'mdb-sortable';

          @Component({
            selector: 'sortable-example',
            templateUrl: './sortable-example.component.html',
          })
          export class SortableExampleComponent {
            sortableList = [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12'
            ];

            onDrop(event: any) {
              moveItemInList(this.sortableList, event.oldIndex, event.newIndex);
            }
          }

        
            
          .mdb-sortable {
            user-select: none;
          }
          .mdb-sortable-placeholder {
            opacity: 0;
          }
          .square {
            height: 90px;
            width: 90px;
            line-height: 90px;
            font-size: 32px;
          }

Disabled items

It is possible to disable sorting functionality by using [disabled]="true" input.

Sortable item
Disabled sortable item
Disabled sortable item
Sortable item

Show code

HTML
Typescript
SCSS

        
            
          <ul mdbSortableList class="list-group" (drop)="onDrop($event)">
            <li *ngFor="let item of sortableList" mdbSortable class="list-group-item" [disabled]="item.disabled">{{ item.name }}</li>
          </ul>

        
            
          import { Component } from '@angular/core';
          import { moveItemInList } from 'mdb-sortable';

          @Component({
            selector: 'sortable-example',
            templateUrl: './sortable-example.component.html',
          })
          export class SortableExampleComponent {
            sortableList = [
              { name: 'Sortable item', disabled: false },
              { name: 'Disabled sortable item', disabled: true },
              { name: 'Disabled sortable item', disabled: true },
              { name: 'Sortable item', disabled: false },
            ];

            onDrop(event: any) {
              moveItemInList(this.sortableList, event.oldIndex, event.newIndex);
            }
          }

        
            
          .mdb-sortable {
            user-select: none;
          }
          .mdb-sortable-placeholder {
            opacity: 0;
          }
          .mdb-sortable-disabled {
            color: lightgray;
          }

Sortable deck of cards

Cards with collapsed content and sorting between lists - similar behavior can be observed on Trello.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Show code

HTML
SCSS

        
            
          <div class="card-deck" mdbSortableList>
            <!-- Card -->
            <mdb-card mdbSortable>
              <div class="view overlay waves-light" mdbWavesEffect>
                <!-- Card img -->
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/16.webp" alt="Card image cap"></mdb-card-img>
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--Card content-->
              <mdb-card-body>
                <!--Title-->
                <mdb-card-title>
                  <h4>Card Title</h4>
                </mdb-card-title>
                <!--Text-->
                <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                  content.
                </mdb-card-text>
                <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
              </mdb-card-body>
            </mdb-card>
            <!-- Card -->
            <mdb-card mdbSortable>
              <div class="view rgba-white-slight waves-light" mdbWavesEffect>
                <!-- Card img -->
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/14.webp" alt="Card image cap"></mdb-card-img>
                <a>
                  <div class="mask"></div>
                </a>
              </div>
              <!--Card content-->
              <mdb-card-body>
                <!--Title-->
                <mdb-card-title>
                  <h4>Card Title</h4>
                </mdb-card-title>
                <!--Text-->
                <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                  content.
                </mdb-card-text>
                <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
              </mdb-card-body>
            </mdb-card>
            <!-- Card -->
            <mdb-card mdbSortable>
              <div class="view rgba-white-slight waves-light" mdbWavesEffect>
                <!-- Card img -->
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/images/15.webp" alt="Card image cap"></mdb-card-img>
                <a>
                  <div class="mask"></div>
                </a>
              </div>
              <!--Card content-->
              <mdb-card-body>
                <!--Title-->
                <mdb-card-title>
                  <h4>Card Title</h4>
                </mdb-card-title>
                <!--Text-->
                <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                  content.
                </mdb-card-text>
                <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
              </mdb-card-body>
            </mdb-card>
          </div>

        
            
          .mdb-sortable {
            user-select: none;
          }
          .mdb-sortable-placeholder {
            opacity: 0;
          }

Sortable nav links

Nav links with sortable feature.

Active
Link
Link
Disabled

Show code

HTML
SCSS

        
            
          <ul class="nav grey lighten-4 py-4 sortable" mdbSortableList>
            <li class="nav-item" mdbSortable>
              <a class="nav-link active" href="#!">Active</a>
            </li>
            <li class="nav-item" mdbSortable>
              <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item" mdbSortable>
              <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item" mdbSortable>
              <a class="nav-link disabled" href="#!">Disabled</a>
            </li>
          </ul>

        
            
          .mdb-sortable {
            user-select: none;
          }
          .mdb-sortable-placeholder {
            opacity: 0;
          }
          .mdb-sortable-helper {
            list-style: none;
          }

Step 1: Create new Angular application using Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract downloaded archive from Step 2 and copy mdb-sortable-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-sortable-{version-number}.tgz package in your application by executing the below command in the application's terminal:


          npm install mdb-sortable-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-sortable-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbSortableModule in the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract downloaded archive from Step 1 and copy mdb-sortable-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-sortable-{version-number}.tgz package in your application by executing the below command in the application's terminal:


          npm install mdb-sortable-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-sortable-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbSortableModule in the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Sortable - API

Download

This plugin requires a purchase.
Buy sortable plugin

Directives

MdbSortableListDirective

Selector: mdbSortableList

Type: MdbSortableListDirective

MdbSortableDirective

Selector: mdbSortable

Type: MdbSortableDirective

Inputs

MdbSortableList

Name	Type	Default	Description	Example
`autoScroll`	boolean	false	Automatically update scroll position of sortable list when dragging sortable item	`[autoScroll]="true"`
`connectedWith`	MdbSortableList[]	-	Array of other lists connected to sortable list	`[connectedWith]="sortableList"`
`data`	any[]	-	Array of sortable items	`[data]="sortableItems"`

MdbSortable

Name	Type	Default	Description	Example
`disabled`	boolean	false	Specifies disabled state of sortable item	`[disabled]="true"`
`disabledDragElements`	ElementRef[]	null	Specifies the element on which sortable should be disabled (use it if you want some element, eg. button on which you want to call events)	`[disabledDragElements]="[#template-element-ref]"`

Outputs

MdbSortableList

Name	Type	Description	Example
`drop`	EventEmitter<{ currentList: MdbSortableListDirective, previousList: MdbSortableListDirective, oldIndex: number, newIndex: number }>	Event fired when sortable item is dropped in sortable list	`(drop)="onDrop($event)"`

MdbSortable

Name	Type	Description	Example
`dragStart`	EventEmitter<MdbSortableDirective>	Event fired on drag start of sortable item	`(dragStart)="onDragStart($event)"`
`dragEnd`	EventEmitter<MdbSortableDirective>	Event fired on drag end of sortable item	`(dragEnd)="onDragEnd($event)"`