ng2-dnd

  • Version 9.0.0-beta2
  • Published
  • 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: any,
          _dragDropService: DragDropService,
          _config: DragDropConfig,
          _cdr: any
          );

            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: any,
                      _dragDropService: DragDropService,
                      _config: DragDropConfig,
                      _Component: AbstractComponent,
                      _cdr: any
                      );

                        class DataTransferEffect

                        class DataTransferEffect {}

                          constructor

                          constructor(name: string);

                            property COPY

                            static COPY: DataTransferEffect;
                              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: () => any;

                                          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: any;

                                                                              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: any,
                                                                                              dragDropService: DragDropService,
                                                                                              config: DragDropConfig,
                                                                                              cdr: any
                                                                                              );

                                                                                                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: any;

                                                                                                    property onDragStart

                                                                                                    onDragStart: any;
                                                                                                    • Callback function called when the drag actions happened.

                                                                                                    property onDragSuccessCallback

                                                                                                    onDragSuccessCallback: 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: any,
                                                                                                      dragDropService: DragDropService,
                                                                                                      config: DragDropConfig,
                                                                                                      _Component: DraggableComponent,
                                                                                                      cdr: any
                                                                                                      );

                                                                                                        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: any,
                                                                                                                    dragDropService: DragDropService,
                                                                                                                    config: DragDropConfig,
                                                                                                                    cdr: any
                                                                                                                    );

                                                                                                                      property onDragEnter

                                                                                                                      onDragEnter: any;

                                                                                                                        property onDragLeave

                                                                                                                        onDragLeave: any;

                                                                                                                          property onDragOver

                                                                                                                          onDragOver: any;

                                                                                                                            property onDropSuccess

                                                                                                                            onDropSuccess: any;
                                                                                                                            • 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: any,
                                                                                                                              dragDropService: DragDropService,
                                                                                                                              config: DragDropConfig,
                                                                                                                              _sortableContainer: SortableContainer,
                                                                                                                              _sortableDataService: DragDropSortableService,
                                                                                                                              cdr: any
                                                                                                                              );

                                                                                                                                property dragData

                                                                                                                                dragData: any;
                                                                                                                                • The data that has to be dragged. It can be any JS object

                                                                                                                                property index

                                                                                                                                index: number;

                                                                                                                                  property onDragEndCallback

                                                                                                                                  onDragEndCallback: any;

                                                                                                                                    property onDragOverCallback

                                                                                                                                    onDragOverCallback: any;

                                                                                                                                      property onDragStartCallback

                                                                                                                                      onDragStartCallback: any;

                                                                                                                                        property onDragSuccessCallback

                                                                                                                                        onDragSuccessCallback: 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: any;

                                                                                                                                          class SortableContainer

                                                                                                                                          class SortableContainer extends AbstractComponent {}

                                                                                                                                            constructor

                                                                                                                                            constructor(
                                                                                                                                            elemRef: any,
                                                                                                                                            dragDropService: DragDropService,
                                                                                                                                            config: DragDropConfig,
                                                                                                                                            cdr: any,
                                                                                                                                            _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: any,
                                                                                                                                                          dragDropService: DragDropService,
                                                                                                                                                          config: DragDropConfig,
                                                                                                                                                          _Component: SortableComponent,
                                                                                                                                                          cdr: any
                                                                                                                                                          );

                                                                                                                                                            Package Files (8)

                                                                                                                                                            Dependencies (1)

                                                                                                                                                            Dev Dependencies (0)

                                                                                                                                                            No dev dependencies.

                                                                                                                                                            Peer Dependencies (2)

                                                                                                                                                            Badge

                                                                                                                                                            To add a badge like this onejsDocs.io badgeto 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>