Edit these docs Rate these docs

Drag and drop / Draggable

Bootstrap drag and drop / draggable plugin

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

Draggable panel

I will snap to orange panel outer edges

Draggable panel

I will snap to the body from distance 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</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.jpg" 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>
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

Angular Draggable - API

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


Download

This plugin requires a purchase.

Buy Draggable plugin - $9

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