ng2-draggable-dom

ng2-draggable-dom

Table of contents

1. About This Package
2. Latest News
3. Installation
4. Usage
5. API

About This Package

ng2-draggable-dom is a directive for Angular 2+ that makes any DOM element draggable. This project is a fork of the original angular2-draggable directive by xieziyu and was created to provide a more robust set of features and to keep package releases on the bleeding edge.

Latest News

Always check the CHANGELOG for what's brand new and for all the gooey details! See the top of this readme to see what the current version of this module is.

2017.12.13:

• Critical bug fixes and enhancements have been made for full bounds constrain support.

2017.12.12:

• The fork was renamed ng2-draggable-dom to be published as a new npm package.
• Critical bug fixes and enhancements have been made.

Installation

npm install ng2-draggable-dom --save

Usage

1. Import DraggableDomModule in your app module (or other proper angular module) and place it in your imports section:

   import { DraggableDomModule } from "ng2-draggable-dom";
   
   @NgModule({
      imports: [
        ...,
        DraggableDomModule,
      ],
      ...
   })
   export class AppModule { }
   

2. Use the ngDraggable directive to make a DOM element draggable.

   <div ngDraggable>Drag me!</div>
   

3. Explore the API of inputs and outputs to help make your element drag just the way you would like!

API

Inputs

ngDraggable {boolean}

• true: the element can be dragged.
• false: the element cannot be dragged.

handle {HTMLElement}

• {HTMLElement}: The element that should be used as the selectable region to drag.

bounds {HTMLElement}

• {HTMLElement}: The element that represents the region the entire draggable element should be kept within. Note, by setting this property you are not forcing it to be constrained within the bounds.

constrainByBounds {boolean}

• true: if bounds is set, the draggable element will be constrained by that HTMLElement.
• false (default): if bounds is set, the draggable element will just report which boundary edge has been passed by in the edge output emitter.

Outputs

started {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):

• Emits the nativeElement that is being dragged in $event.target.
• Emits the current translation in $event.position as an IPosition {x, y}.

stopped {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):

• Emits the nativeElement that is being dragged in $event.target.
• Emits the current translation in $event.position as an IPosition {x, y}.

moved {target: nativeElement, position: IPosition} as {IMoveEvent} (exported interface):

• Emits the nativeElement that is being dragged in $event.target.
• Emits the current translation in $event.position as an IPosition {x, y}.

edge {top: boolean, right: boolean, bottom: boolean, left: boolean} as IBounds (exported interface):

• if bounds is set, this output will emit an object defining the state of constraint for each edge of the HTMLElement defined by bounds. If the draggable element has just been dragged onto or beyond the right edge of the bounds HTMLElement, you will get an output like the following:

{
  top: true,
  right: false,
  bottom: true,
  left: true,
}

CSS:

When ngDraggable is enabled on some element, the ng-draggable class is automatically assigned to it. You can use it to customize it. For example, change the cursor style for draggable elements in your page by doing the following:

.ng-draggable {
  cursor: move;
}