ng-draggable-han v1.0.8
NgDraggable
Angular module that provides the ability to drag the element. It also limits the area where the element is dragging, or provides a directive that occurs when it is dragged over other elements.
Usage
Install
ng-draggable-hanpackage.yarn add ng-draggable-hanImport
DraggableModuleto@NgModule.import { DraggableModule } from 'ng-draggable-han'; @NgModule({ imports : [..., DraggableModule] })Add directive to template. For example,
DraggableDirectiveis used by:<div class="box" ngDraggable (dragStart)="onDragStart($event)"></div>Add event handler.
class SomeComponent { onDragStart (event : DragEvent) { // do something } }
Common Interfaces
Position
Represents the coordinates of x, y.
interface Position {
x : number;
y : number;
}Boundaries
Use to limit the area where MobableDirective can move.
interface Boundaries {
minX : number;
maxX : number;
minY : number;
maxY : number;
}DragEvent
Represent drag event, emitted by DraggableDirective.
interface DragEvent {
start : Position; // position of starting drag
current : Position; // position of current drag
target : HTMLElement; // dragging HTMLElement
movement : Position; // offsets while drag
}SortEvent
Represent sort event, emitted by SortableAreaDirective. Targets are MovableDirective.
interface SortEvent {
currentIndex : number; // index of starting drag element
newIndex : number; // index of sort target
}Directives
DraggableDirective ([ngDraggable])
Adds the ability to respond to the drag by the element.
<div ngDraggable>react drag event</div>Properties
- `@Input() ngMovable : boolean` : Switch of drag interaction. (default: true) ```html <div ngDraggable>default : true</div> <div [ngDraggable]="false">disabled</div> <div [ngDraggable]="someFlag">set by flag</div> ``` - `isDragging : boolean` : Represents element is dragging now. This flag used to set `dragging` CSS class.Methods
- `clientRect() : DOMRect` : Returns DOMRect of element. (internally use `getBoundingClientRect()`)Events
- `dragStart : DragEvent` : Drag start eventdragMove : DragEvent: Drag move eventdragEnd : DragEvent: Drag end event
MovableDirective ([ngMovable])
The MovableDirective adds the ability for the element to move in response to the drag, but the element with this directive does not move directly. You must use MovebleHelperDirective to display the element during dragging.
<div class="moveBox" ngMovable>
<span>inner text</span>
<ng-template ngMovableHelper></ng-template>
</div>Properties
- `ngMovable : boolean` : Switch of drag interaction, (default : true) ```html <div ngMovable>default : true</div> <div [ngMovable]="false">disabled</div> <div [ngMovable]="someFlag">set by flag</div> ``` - `@Input() reset : boolean` : Switch of resetting position. If set, returns to original position. (true : `true`)Methods
- `setMovementBoundaries (boundaries : Boundaries)` : Restrict moving area of `MovableDirective`. Called by `MovableAreaDirective`.CSS Classes
- `dragging` : Added to original/replica element during dragging. - `dragSource` : Added to original element during dragging. - `dragDummy` : Added to replica element during dragging. > The replication element does not exist in the lower layer of the original element or parent element because it uses `@angular/cdk/overlay`. The replication element is rendered to the `<body>`.
tip :
DragEventinDraggableDirectivecan also be received inMovableAreaDirective. So it's possible to use it as follows.
<div ngMovableArea (dragEnd)="doSomething()">
<div ngMovable></div>
</div>MovableHelperDirective ([ngMovableHelper])
Use to display replicas on the screen while the MovableDirective Element is being dragged.
MovableAreaDirective ([ngMovableArea])
Limits the area where the MovableDirective element can move. The MovableDirective element cannot be moved out of the MovableAreaDirective element.
<div class="area" ngMovableArea>
<div class="box" ngMovable [reset]="false">
<ng-template ngMovableHelper></ng-template>
</div>
</div>SortableAreaDirective ([ngSortableArea])
When the MovableDirective element moves over another MovableDirective element, a SortEvent event occurs.
<div class="area sortable" ngSortableArea (sort)="sort($event)">
<div class="box" ngMovable *ngFor="let box of sortableList">
<span>{{ box }}</span>
<ng-template ngMovableHelper></ng-template>
</div>
</div>export class AppComponent {
title = 'ng-draggable';
public sortableList : any[] = ['box 1', 'box 2', 'box 3', 'box 4'];
sort (event : SortEvent) {
const current = this.sortableList[event.currentIndex];
const swapWith = this.sortableList[event.newIndex];
this.sortableList[event.newIndex] = current;
this.sortableList[event.currentIndex] = swapWith;
}
}Events
- `sort : SortEvent` : Represent emitting sort condition.