angular-draggable-droppable

  • Version 8.0.0
  • Published
  • 365 kB
  • 2 dependencies
  • MIT license

Install

npm i angular-draggable-droppable
yarn add angular-draggable-droppable
pnpm add angular-draggable-droppable

Overview

Drag and drop for angular 15.0+

Index

Classes

class DragAndDropModule

class DragAndDropModule {}

    property ɵfac

    static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropModule, never>;

      property ɵinj

      static ɵinj: i0.ɵɵInjectorDeclaration<DragAndDropModule>;

        property ɵmod

        static ɵmod: i0.ɵɵNgModuleDeclaration<
        DragAndDropModule,
        [
        typeof i1.DraggableDirective,
        typeof i2.DroppableDirective,
        typeof i3.DraggableScrollContainerDirective
        ],
        never,
        [
        typeof i1.DraggableDirective,
        typeof i2.DroppableDirective,
        typeof i3.DraggableScrollContainerDirective
        ]
        >;

          class DraggableDirective

          class DraggableDirective implements OnInit, OnChanges, OnDestroy {}

            constructor

            constructor(
            element: ElementRef<HTMLElement>,
            renderer: Renderer2,
            draggableHelper: DraggableHelper,
            zone: NgZone,
            vcr: ViewContainerRef,
            scrollContainer: DraggableScrollContainerDirective,
            document: any
            );

            property autoScroll

            autoScroll: {
            margin:
            | number
            | { top?: number; left?: number; right?: number; bottom?: number };
            maxSpeed?:
            | number
            | { top?: number; left?: number; right?: number; bottom?: number };
            scrollWhenOutside?: boolean;
            };

              property dragActiveClass

              dragActiveClass: string;
              • The css class to apply when the element is being dragged

              property dragAxis

              dragAxis: DragAxis;
              • The axis along which the element is draggable

              property dragCursor

              dragCursor: string;
              • The cursor to use when hovering over a draggable element

              property dragEnd

              dragEnd: EventEmitter<DragEndEvent>;
              • Called after the element is dragged

              property dragging

              dragging: EventEmitter<DragMoveEvent>;
              • Called when the element is being dragged

              property dragPointerDown

              dragPointerDown: EventEmitter<DragPointerDownEvent>;
              • Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it

              property dragSnapGrid

              dragSnapGrid: SnapGrid;
              • Snap all drags to an x / y grid

              property dragStart

              dragStart: EventEmitter<DragStartEvent>;
              • Called when the element has started to be dragged. Only called after at least one mouse or touch move event. If you call $event.cancelDrag$.emit() it will cancel the current drag

              property dropData

              dropData: any;
              • an object of data you can pass to the drop event

              property ghostDragEnabled

              ghostDragEnabled: boolean;
              • Show a ghost element that shows the drag when dragging

              property ghostElementAppendTo

              ghostElementAppendTo: HTMLElement;
              • The element the ghost element will be appended to. Default is next to the dragged element

              property ghostElementCreated

              ghostElementCreated: EventEmitter<GhostElementCreatedEvent>;
              • Called after the ghost element has been created

              property ghostElementTemplate

              ghostElementTemplate: TemplateRef<any>;
              • An ng-template to be inserted into the parent element of the ghost element. It will overwrite any child nodes.

              property ɵdir

              static ɵdir: i0.ɵɵDirectiveDeclaration<
              DraggableDirective,
              '[mwlDraggable]',
              never,
              {
              dropData: 'dropData';
              dragAxis: 'dragAxis';
              dragSnapGrid: 'dragSnapGrid';
              ghostDragEnabled: 'ghostDragEnabled';
              showOriginalElementWhileDragging: 'showOriginalElementWhileDragging';
              validateDrag: 'validateDrag';
              dragCursor: 'dragCursor';
              dragActiveClass: 'dragActiveClass';
              ghostElementAppendTo: 'ghostElementAppendTo';
              ghostElementTemplate: 'ghostElementTemplate';
              touchStartLongPress: 'touchStartLongPress';
              autoScroll: 'autoScroll';
              },
              {
              dragPointerDown: 'dragPointerDown';
              dragStart: 'dragStart';
              ghostElementCreated: 'ghostElementCreated';
              dragging: 'dragging';
              dragEnd: 'dragEnd';
              },
              never,
              never,
              false,
              never
              >;

                property ɵfac

                static ɵfac: i0.ɵɵFactoryDeclaration<
                DraggableDirective,
                [null, null, null, null, null, { optional: true }, null]
                >;

                  property pointerDown$

                  pointerDown$: Subject<PointerEvent>;

                  property pointerMove$

                  pointerMove$: Subject<PointerEvent>;

                  property pointerUp$

                  pointerUp$: Subject<PointerEvent>;

                  property showOriginalElementWhileDragging

                  showOriginalElementWhileDragging: boolean;
                  • Show the original element when ghostDragEnabled is true

                  property touchStartLongPress

                  touchStartLongPress: { delay: number; delta: number };
                  • Amount of milliseconds to wait on touch devices before starting to drag the element (so that you can scroll the page by touching a draggable element)

                  property validateDrag

                  validateDrag: ValidateDrag;
                  • Allow custom behaviour to control when the element is dragged

                  method ngOnChanges

                  ngOnChanges: (changes: SimpleChanges) => void;

                    method ngOnDestroy

                    ngOnDestroy: () => void;

                      method ngOnInit

                      ngOnInit: () => void;

                        class DraggableScrollContainerDirective

                        class DraggableScrollContainerDirective {}
                        • If the window isn't scrollable, then place this on the scrollable container that draggable elements are inside. e.g.

                          <div style="overflow: scroll" mwlDraggableScrollContainer>
                          <div mwlDraggable>Drag me!</div>
                          </div>

                        constructor

                        constructor(elementRef: ElementRef<HTMLElement>);

                        property elementRef

                        elementRef: ElementRef<HTMLElement>;

                          property ɵdir

                          static ɵdir: i0.ɵɵDirectiveDeclaration<
                          DraggableScrollContainerDirective,
                          '[mwlDraggableScrollContainer]',
                          never,
                          {},
                          {},
                          never,
                          never,
                          false,
                          never
                          >;

                            property ɵfac

                            static ɵfac: i0.ɵɵFactoryDeclaration<DraggableScrollContainerDirective, never>;

                              class DroppableDirective

                              class DroppableDirective implements OnInit, OnDestroy {}

                                constructor

                                constructor(
                                element: ElementRef<HTMLElement>,
                                draggableHelper: DraggableHelper,
                                zone: NgZone,
                                renderer: Renderer2,
                                scrollContainer: DraggableScrollContainerDirective
                                );

                                  property currentDragSubscription

                                  currentDragSubscription: Subscription;

                                    property dragActiveClass

                                    dragActiveClass: string;
                                    • Added to the element any time a draggable element is being dragged

                                    property dragEnter

                                    dragEnter: EventEmitter<DropEvent<any>>;
                                    • Called when a draggable element starts overlapping the element

                                    property dragLeave

                                    dragLeave: EventEmitter<DropEvent<any>>;
                                    • Called when a draggable element stops overlapping the element

                                    property dragOver

                                    dragOver: EventEmitter<DropEvent<any>>;
                                    • Called when a draggable element is moved over the element

                                    property dragOverClass

                                    dragOverClass: string;
                                    • Added to the element when an element is dragged over it

                                    property drop

                                    drop: EventEmitter<DropEvent<any>>;
                                    • Called when a draggable element is dropped on this element

                                    property ɵdir

                                    static ɵdir: i0.ɵɵDirectiveDeclaration<
                                    DroppableDirective,
                                    '[mwlDroppable]',
                                    never,
                                    {
                                    dragOverClass: 'dragOverClass';
                                    dragActiveClass: 'dragActiveClass';
                                    validateDrop: 'validateDrop';
                                    },
                                    {
                                    dragEnter: 'dragEnter';
                                    dragLeave: 'dragLeave';
                                    dragOver: 'dragOver';
                                    drop: 'drop';
                                    },
                                    never,
                                    never,
                                    false,
                                    never
                                    >;

                                      property ɵfac

                                      static ɵfac: i0.ɵɵFactoryDeclaration<
                                      DroppableDirective,
                                      [null, null, null, null, { optional: true }]
                                      >;

                                        property validateDrop

                                        validateDrop: ValidateDrop;
                                        • Allow custom behaviour to control when the element is dropped

                                        method ngOnDestroy

                                        ngOnDestroy: () => void;

                                          method ngOnInit

                                          ngOnInit: () => void;

                                            Interfaces

                                            interface DragEndEvent

                                            interface DragEndEvent extends Coordinates {}

                                              property dragCancelled

                                              dragCancelled: boolean;

                                                interface DragMoveEvent

                                                interface DragMoveEvent extends Coordinates {}

                                                  interface DragPointerDownEvent

                                                  interface DragPointerDownEvent extends Coordinates {}

                                                    interface DragStartEvent

                                                    interface DragStartEvent {}

                                                      property cancelDrag$

                                                      cancelDrag$: ReplaySubject<void>;

                                                        interface DropEvent

                                                        interface DropEvent<T = any> {}

                                                          property clientX

                                                          clientX: number;
                                                          • ClientX value of the mouse location where the drop occurred

                                                          property clientY

                                                          clientY: number;
                                                          • ClientY value of the mouse location where the drop occurred

                                                          property dropData

                                                          dropData: T;

                                                            property target

                                                            target: EventTarget;
                                                            • The target of the event where the drop occurred

                                                            interface GhostElementCreatedEvent

                                                            interface GhostElementCreatedEvent {}

                                                              property clientX

                                                              clientX: number;

                                                                property clientY

                                                                clientY: number;

                                                                  property element

                                                                  element: HTMLElement;

                                                                    interface ValidateDragParams

                                                                    interface ValidateDragParams extends Coordinates {}

                                                                      property transform

                                                                      transform: {
                                                                      x: number;
                                                                      y: number;
                                                                      };

                                                                        interface ValidateDropParams

                                                                        interface ValidateDropParams extends DropEvent {}

                                                                          Type Aliases

                                                                          type ValidateDrag

                                                                          type ValidateDrag = (params: ValidateDragParams) => boolean;

                                                                            type ValidateDrop

                                                                            type ValidateDrop = (params: ValidateDropParams) => boolean;

                                                                              Package Files (5)

                                                                              Dependencies (2)

                                                                              Dev Dependencies (0)

                                                                              No dev dependencies.

                                                                              Peer Dependencies (1)

                                                                              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/angular-draggable-droppable.

                                                                              • Markdown
                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular-draggable-droppable)
                                                                              • HTML
                                                                                <a href="https://www.jsdocs.io/package/angular-draggable-droppable"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>