web
mobile
Edit these docs Rate these docs

Angular Bootstrap Sortable

Angular sortable - Bootstrap 4 & Material Design

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


        <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


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

1
2
3
4
5
6
7
8
9
10
11
12


<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


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



<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.jpg" 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.jpg" 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.jpg" 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;
        }

      


Installation guide

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!

Edit these docs Rate these docs

Sortable - getting started : download & setup


Download

This plugin requires a purchase.

Buy sortable plugin - $9

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