Angular Bootstrap Draggable

Angular Draggable - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

MD Bootstrap Draggable plugin is an extension that allows you to move objects by clicking on them and dragging anywhere within the viewport.

To start working with Draggable plugin see "API" tab on this page.

Live preview

Basic example

Draggable panel

I'm draggable panel

        
            
          <div mdbDraggable class="card w-25">
            <h5 class="card-header primary-color white-text">Draggable panel</h5>
            <div class="card-body">
              <p class="card-text">I'm draggable panel</p>
            </div>
          </div>

Auto-scroll

By default scroll position will be automatically updated when element is moved beyond its container boundaries. Use [autoScroll]="false" input to disable this feature. It's also possible to change scroll sensitivity and speed with [scrollSensitivity] and [scrollSpeed] inputs.

Draggable panel

Drag me outside container boundary to enable auto-scroll

        
            
            <div class="row">
              <div class="col-md-4 col-6">
                <div mdbDraggable [scrollSpeed]="50" [scrollSensitivity]="50" class="card">
                  <h5 class="card-header success-color white-text">Draggable panel</h5>
                  <div class="card-body">
                    <p class="card-text">Drag me outside container boundary to enable auto-scroll</p>
                  </div>
                </div>
              </div>
            </div>

Axis

You can limit draggable element movement to one axis with [lockAxis]="'x'" or [lockAxis]="'y'" inputs.

Draggable panel

I can move only in the x-axis

Draggable panel

I can move only in the y-axis

        
            
          <div class="row">
            <div class="col-md-4 col-6">
              <div mdbDraggable [lockAxis]="'x'" class="card">
                <h5 class="card-header primary-color white-text">Draggable panel</h5>
                <div class="card-body">
                  <p class="card-text">I can move only in the x-axis </p>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-6">
              <div mdbDraggable [lockAxis]="'y'" class="card">
                <h5 class="card-header deep-orange white-text">Draggable panel</h5>
                <div class="card-body">
                  <p class="card-text">I can move only in the y-axis</p>
                </div>
              </div>
            </div>
          </div>

Handles

You can use [handle] input to enable dragging only when cursor is over a specific part of the draggable element. In following example you can drag the card around only when mouse cursor is over the card image.

Card image cap

Draggable card

Move mouse over image to drag

Button 
        
            
          <div class="row">
            <div class="col-md-3">
              <!-- Card -->
              <div mdbDraggable [handle]="cardImage" class="card">
              <!-- Card image -->
              <img #cardImage class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
              <!-- Card content -->
              <div class="card-body">
              <!-- Title -->
              <h4 class="card-title"><a>Draggable card</a></h4>
              <!-- Text -->
              <p class="card-text">Move mouse over image to drag</p>
              <!-- Button -->
              <a href="#" mdbBtn color="primary">Button</a>
              </div>
              </div>
              <!-- Card -->
            </div>
          </div>

Snap to grid

Use [snapToGrid]="true" input to snap the draggable element to grid. Grid size can be changed with [gridSize] input.

Card image cap

Draggable card

I will snap to grid of 50px

        
            
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-6">
              <div mdbDraggable [snapToGrid]="true" [gridSize]="50" class="card">
                <h5 class="card-header primary-color white-text">Draggable panel</h5>
                <div class="card-body">
                  <p class="card-text">I will snap to grid of 50px</p>
                </div>
              </div>
            </div>
          </div>
        </div>

Revert position

When [reverPosition] option is set to true, draggable element is returned to its original position after drag end.

Card image cap

Draggable card

Revert original card

        
            
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <!-- Card -->
                <div mdbDraggable [revertPosition]="true" class="card">
                  <!-- Card image -->
                  <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/49.webp" alt="Card image cap">
                  <!-- Card content -->
                  <div class="card-body">
                    <!-- Title -->
                    <h4 class="card-title"><a>Draggable card</a></h4>
                    <!-- Text -->
                    <p>Revert original card</p>
                  </div>
                </div>
                <!-- Card -->
            </div>

Limit draggable movement

You can set the boundaries in which draggable element can move by using [boundTo] input.

Draggable panel

I can only move inside blue container

        
            
            <div class="container" style="height: 1000px">
              <div class="row h-100">
                <div #draggableContainer class="col-md-6 blue">
                  <div class="row">
                      <div class="col-md-6">
                        <div mdbDraggable [boundTo]="draggableContainer" class="card card-body">
                          <h4 class="card-title">Draggable panel</h4>
                          <p class="card-text">I can only move inside blue container</p>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="col-md-6 mdb-color"></div>
            </div>

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-draggable-{version-number}.tgz file to your application root directory

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

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

For example, the installation command should look like following: npm install mdb-draggable-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 MdbDraggableModule 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-draggable-{version-number}.tgz file to your application root directory

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

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

For example, the installation command should look like following: npm install mdb-draggable-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 MdbDraggableModule in the app.module.ts file

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

Angular Draggable - API

In this section you will find information about required modules and available inputs, outputs, methods and events of draggable plugin.

Download

This plugin requires a purchase.

Buy Draggable plugin

Directives

MdbDraggableDirective

Selector: mdbDraggable

Type: MdbDraggableDirective

Inputs

Name Type Default Description Example
autoScroll boolean true Enable scroll position update when element is dragged outside its container boundaries [autoScroll]="true"
boundTo HTMLElement | String - Allow to set boundaries in which draggable element can be moved [boundTo]="'body'"
disabled boolean false Allow to disable dragging [disabled]="true"
gridSize number 1 Specifies grid size when snapToGrid option is enabled [gridSize]="50"
handle HTMLElement | string - Allow to specify drag handle for draggable element [handle]="'.card-body'"
lockAxis string - Allow to limit draggable element movement to one axis [lockAxis]="'x'" or [lockAxis]="'y'"
revertPosition boolean false Specifies whether the element should revert to its start position after drag end [revertPosition]="true"
scrollSensitivity number 30 Specifies distance in pixels from the edge of the viewport after which scroll position should be updated [scrollSensitivity]="50"
scrollSpeed number 25 Specifies number of pixels by which the scroll position will be updated [scrollSpeed]="50"
snapToGrid boolean false Allow to enable 'snap to grid' option [snapToGrid]="true"

Outputs

Name Type Description Example
dragStart EventEmitter<HTMLElement> Event fired on drag start (dragStart)="onDragStart($event)"
dragEnd EventEmitter<HTMLElement> Event fired on drag end (dragEnd)="onDragEnd($event)"