angular-draggable-droppable

  • Version 4.6.0
  • Published
  • 860 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 6.0+

Index

Classes

class DragAndDropModule

class DragAndDropModule {}

    class ɵa

    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 ɵb

              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 ɵc

                        class DraggableHelper {}

                          property currentDrag

                          currentDrag: any;

                            class ɵd

                            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 activeLongPressDrag

                            activeLongPressDrag: boolean;
                            • Trigger the DragStart after a long touch in scrollable container when true

                              Deprecated

                              will be removed in v5 (use [touchStartLongPress]="{delay: 300, delta: 30}" on the mwlDraggable element instead)

                            property elementRef

                            elementRef: any;

                              property longPressConfig

                              longPressConfig: { duration: number; delta: number };
                              • Configuration of a long touch Duration in ms of a long touch before activating DragStart Delta of the

                                Deprecated

                                will be removed in v5 (use [touchStartLongPress]="{delay: 300, delta: 30}" on the mwlDraggable element instead)

                              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 (51)

                                                                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>