ng2-dnd

ng2-dnd

Version 9.0.0-beta2
Published 4 years ago
489 kB
1 dependency
MIT license

Install

npm i ng2-dnd

yarn add ng2-dnd

pnpm add ng2-dnd

Overview

Angular 2 Drag-and-Drop without dependencies

Index

Variables

variable providers

let providers: (
    | typeof DragDropConfig
    | {
          provide: typeof DragDropService;
          useFactory: typeof dragDropServiceFactory;
          deps?: undefined;
      }
    | {
          provide: typeof DragDropSortableService;
          useFactory: typeof dragDropSortableServiceFactory;
          deps: typeof DragDropConfig[];
      }
)[];

Functions

function dragDropServiceFactory

dragDropServiceFactory: () => DragDropService;

function dragDropSortableServiceFactory

dragDropSortableServiceFactory: (
    config: DragDropConfig
) => DragDropSortableService;

Classes

class AbstractComponent

abstract class AbstractComponent {}

constructor

constructor(
    elemRef: ElementRef,
    _dragDropService: DragDropService,
    _config: DragDropConfig,
    _cdr: ChangeDetectorRef
);

property allowDrop

allowDrop: (dropData: any) => boolean;

Restrict places where a draggable element can be dropped. Either one of these two mechanisms can be used:
- dropZones: an array of strings that permits to specify the drop zones associated with this component. By default, if the drop-zones attribute is not specified, the droppable component accepts drop operations by all the draggable components that do not specify the allowed-drop-zones
- allowDrop: a boolean function for droppable components, that is checked when an item is dragged. The function is passed the dragData of this item. - if it returns true, the item can be dropped in this component - if it returns false, the item cannot be dropped here

property cloneItem

cloneItem: boolean;

property dragEnabled

dragEnabled: boolean;

property dragImage

dragImage: string | Function | DragImage;

Here is the property dragImage you can use: - The string value as url to the image <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="/images/simpler.png"> ... - The DragImage value with Image and optional offset by x and y: let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0); ... <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="myDragImage"> ... - The custom function to return the value of dragImage programmatically: <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="getDragImage(someData)"> ... getDragImage(value:any): string { return value ? "/images/simpler1.png" : "/images/simpler2.png" }

property dropEnabled

dropEnabled: boolean;

Allows drop on this element

property dropZones

dropZones: string[];

property effectAllowed

effectAllowed: string;

Drag effect

property effectCursor

effectCursor: string;

Drag cursor

method detectChanges

detectChanges: () => void;

***** Change detection *****

method setDragHandle

setDragHandle: (elem: HTMLElement) => void;

class AbstractHandleComponent

class AbstractHandleComponent {}

constructor

constructor(
    elemRef: ElementRef,
    _dragDropService: DragDropService,
    _config: DragDropConfig,
    _Component: AbstractComponent,
    _cdr: ChangeDetectorRef
);

class DataTransferEffect

class DataTransferEffect {}

constructor

constructor(name: string);

property COPY

static COPY: DataTransferEffect;

property LINK

static LINK: DataTransferEffect;

property MOVE

static MOVE: DataTransferEffect;

property name

name: string;

property NONE

static NONE: DataTransferEffect;

class DndModule

class DndModule {}

method forRoot

static forRoot: () => ModuleWithProviders<DndModule>;

class DragDropConfig

class DragDropConfig {}

property defaultCursor

defaultCursor: string;

property dragCursor

dragCursor: string;

property dragEffect

dragEffect: DataTransferEffect;

property dragImage

dragImage: DragImage;

property dropEffect

dropEffect: DataTransferEffect;

property onDragEnterClass

onDragEnterClass: string;

property onDragOverClass

onDragOverClass: string;

property onDragStartClass

onDragStartClass: string;

property onSortableDragClass

onSortableDragClass: string;

class DragDropData

class DragDropData {}

property dragData

dragData: any;

property mouseEvent

mouseEvent: MouseEvent;

class DragDropService

class DragDropService {}

property allowedDropZones

allowedDropZones: string[];

property dragData

dragData: any;

property isDragged

isDragged: boolean;

property onDragSuccessCallback

onDragSuccessCallback: EventEmitter<DragDropData>;

class DragDropSortableService

class DragDropSortableService {}

constructor

constructor(_config: DragDropConfig);

property elem

readonly elem: HTMLElement;

property index

index: number;

property isDragged

isDragged: boolean;

property sortableContainer

sortableContainer: SortableContainer;

method markSortable

markSortable: (elem: HTMLElement) => void;

class DraggableComponent

class DraggableComponent extends AbstractComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    cdr: ChangeDetectorRef
);

property cloneItem

cloneItem: boolean;

property dragData

dragData: any;

The data that has to be dragged. It can be any JS object

property dragImage

dragImage: string | Function | DragImage;

Here is the property dragImage you can use: - The string value as url to the image <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="/images/simpler.png"> ... - The DragImage value with Image and offset by x and y: let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0); ... <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="myDragImage"> ... - The custom function to return the value of dragImage programmatically: <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragImage]="getDragImage(someData)"> ... getDragImage(value:any): string { return value ? "/images/simpler1.png" : "/images/simpler2.png" }

property onDragEnd

onDragEnd: EventEmitter<DragDropData>;

property onDragStart

onDragStart: EventEmitter<DragDropData>;

Callback function called when the drag actions happened.

property onDragSuccessCallback

onDragSuccessCallback: EventEmitter<any>;

Callback function called when the drag action ends with a valid drop action. It is activated after the on-drop-success callback

class DraggableHandleComponent

class DraggableHandleComponent extends AbstractHandleComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    _Component: DraggableComponent,
    cdr: ChangeDetectorRef
);

class DragImage

class DragImage {}

constructor

constructor(imageElement: any, x_offset?: number, y_offset?: number);

property imageElement

imageElement: any;

property x_offset

x_offset: number;

property y_offset

y_offset: number;

class DroppableComponent

class DroppableComponent extends AbstractComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    cdr: ChangeDetectorRef
);

property onDragEnter

onDragEnter: EventEmitter<DragDropData>;

property onDragLeave

onDragLeave: EventEmitter<DragDropData>;

property onDragOver

onDragOver: EventEmitter<DragDropData>;

property onDropSuccess

onDropSuccess: EventEmitter<DragDropData>;

Callback function called when the drop action completes correctly. It is activated before the on-drag-success callback.

class SortableComponent

class SortableComponent extends AbstractComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    _sortableContainer: SortableContainer,
    _sortableDataService: DragDropSortableService,
    cdr: ChangeDetectorRef
);

property dragData

dragData: any;

The data that has to be dragged. It can be any JS object

property index

index: number;

property onDragEndCallback

onDragEndCallback: EventEmitter<any>;

property onDragOverCallback

onDragOverCallback: EventEmitter<any>;

property onDragStartCallback

onDragStartCallback: EventEmitter<any>;

property onDragSuccessCallback

onDragSuccessCallback: EventEmitter<any>;

Callback function called when the drag action ends with a valid drop action. It is activated after the on-drop-success callback

property onDropSuccessCallback

onDropSuccessCallback: EventEmitter<any>;

class SortableContainer

class SortableContainer extends AbstractComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    cdr: ChangeDetectorRef,
    _sortableDataService: DragDropSortableService
);

property sortableData

sortableData: any;

method getItemAt

getItemAt: (index: number) => any;

method indexOf

indexOf: (item: any) => number;

method insertItemAt

insertItemAt: (item: any, index: number) => void;

method removeItemAt

removeItemAt: (index: number) => void;

class SortableHandleComponent

class SortableHandleComponent extends AbstractHandleComponent {}

constructor

constructor(
    elemRef: ElementRef,
    dragDropService: DragDropService,
    config: DragDropConfig,
    _Component: SortableComponent,
    cdr: ChangeDetectorRef
);

Package Files (8)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ng2-dnd.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ng2-dnd)

HTML

<a href="https://www.jsdocs.io/package/ng2-dnd"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 3592 ms.
Missing or incorrect documentation? Open an issue for this package.