How can I add ng2-draggable module to my project with Angular CLI

Question

I am working with the Angular CLI and want to add the library ng2-draggable to my project? When I perform an npm install ng2-draggable and then want to import the DraggableModule from the library, it is not found in the IDE.

Do I have to do something else to get it working?

Answer 1

Do you mean this https://github.com/cedvdb/ng2draggable ?

If that's what you meant I published a wrong version on npm before and just uploaded the correct version.

Install

  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 (it is true by default) the class is removed and the component is no longer moveable.

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.