angular-draggable-droppable

  • Version 5.0.0
  • Published
  • 391 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 10.0+

Index

Classes

class DragAndDropModule

class DragAndDropModule {}

    class DraggableDirective

    class DraggableDirective implements OnInit, OnChanges, OnDestroy {}

      constructor

      constructor(
      element: any,
      renderer: any,
      draggableHelper: DraggableHelper,
      zone: any,
      vcr: any,
      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: any;
        • Called after the element is dragged

        property dragging

        dragging: any;
        • Called when the element is being dragged

        property dragPointerDown

        dragPointerDown: any;
        • 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: any;
        • 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: any;
        • Called after the ghost element has been created

        property ghostElementTemplate

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

        property pointerDown$

        pointerDown$: any;

        property pointerMove$

        pointerMove$: any;

        property pointerUp$

        pointerUp$: any;

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

              property elementRef

              elementRef: any;

                class DroppableDirective

                class DroppableDirective implements OnInit, OnDestroy {}

                  constructor

                  constructor(
                  element: any,
                  draggableHelper: DraggableHelper,
                  zone: any,
                  renderer: any,
                  scrollContainer: DraggableScrollContainerDirective
                  );

                    property currentDragSubscription

                    currentDragSubscription: any;

                      property dragActiveClass

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

                      property dragEnter

                      dragEnter: any;
                      • Called when a draggable element starts overlapping the element

                      property dragLeave

                      dragLeave: any;
                      • Called when a draggable element stops overlapping the element

                      property dragOver

                      dragOver: 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: any;
                      • Called when a draggable element is dropped on this element

                      property validateDrop

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

                      method ngOnDestroy

                      ngOnDestroy: () => void;

                        method ngOnInit

                        ngOnInit: () => void;

                          class ɵa

                          class DraggableHelper {}

                            property currentDrag

                            currentDrag: any;

                              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 dropData

                                            dropData: T;

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

                                                            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 target

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

                                                            Type Aliases

                                                            type ValidateDrag

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

                                                              type ValidateDrop

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

                                                                Package Files (6)

                                                                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>