Ng2draggable NPM

draggable

Angular 2 directive to make an element draggable. This is different from drag and drop as this is used to drag a div around. Live demo

Table of content

Install

https://www.npmjs.com/package/ng2draggable

  npm install ng2draggable

Or just copy draggable.directive.ts file content in a directive.

In any case you need to add the directive to your module.

import { Draggable } from 'ng2draggable/draggable.directive';
 
@NgModule({
  declarations: [
    ...,
    Draggable
  ],...})

Usage

<div [ng2-draggable]="true"></div>

That's it! now your component can be moved around.

You can disable it as well :

<div [ng2-draggable]="false"></div>

The component will have a custom class added to it as well: cursor-draggable. You can then use that css to costumize it :

/* Applies a grabbing hand on top of the div that's draggable*/
.cursor-draggable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
 /*  Apply a "closed-hand" cursor during drag operation. */
.cursor-draggable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

When the boolean input is false the class is removed and the component is no longer moveable.

Drag element with child element

The element that triggers the dragging can be specified by using ng2DraggableHandle. In the example below the element dragging is controlled by clicking and dragging on the element elementreference.

<div [ng2-draggable]=true [ng2DraggableHandle]="elementreference">
    <div #elementreference>
        Clicking and dragging this drags the parent element.
    </div>
    <div>
        Clicking and dragging this does not drag the parent element.
    </div>
</div>

Images

If there is an image in the children of the dragged component, make sure to add the HTML5 property draggable="false" to it. This property is used for drag and drop situations, and since ng2draggable directive is not based on that property for various reasons, letting it in might make the component behave unexpectedly.