ng2-draggable-dom

ng2-draggable-dom

Deprecated draggable DOM element directive. Keep on the look out for a new ngx version.

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 began as a fork of the 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.

There are long term plans for major enhancements to this package, so stay tuned and please report any issues you have with existing functionality.

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.

2019.02.14:

• This update is the final release to stabilize the ng2 directive version of this module. Please be on the look out for the ngx titled version that will be created using the Ng7 CLI tools for libraries.

2018.01.11:

• Republished the module to finish a migration of accounts on GitHub and NPM. No functional changes have been made and no known bugs are present in v1.2.1. Happy New Year and stay tuned for future upgrades!

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

Input Properties

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.

Output Emitters

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.

Public Functions

reset() {void}:

• Call this function on a reference to the directive in TypeScript code to request that the directive be reset to a default state. This is useful for when the draggable element has its location programmatically adjusted such that subsequent drags should not remember past translations that may affect future placement.

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;
}