angular-draggable-droppable

angular-draggable-droppable

Version 9.0.1
Published 1 month ago
142 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 20.0+

Classes

class DragAndDropModule

class DragAndDropModule {}

Deprecated
import the standalone DraggableDirective and DroppableDirective directives instead

property ɵfac

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

property ɵinj

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

property ɵmod

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

class DraggableDirective

class DraggableDirective implements OnInit, OnChanges, OnDestroy {}

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: { alias: 'dropData'; required: false };
        dragAxis: { alias: 'dragAxis'; required: false };
        dragSnapGrid: { alias: 'dragSnapGrid'; required: false };
        ghostDragEnabled: { alias: 'ghostDragEnabled'; required: false };
        showOriginalElementWhileDragging: {
            alias: 'showOriginalElementWhileDragging';
            required: false;
        };
        validateDrag: { alias: 'validateDrag'; required: false };
        dragCursor: { alias: 'dragCursor'; required: false };
        dragActiveClass: { alias: 'dragActiveClass'; required: false };
        ghostElementAppendTo: { alias: 'ghostElementAppendTo'; required: false };
        ghostElementTemplate: { alias: 'ghostElementTemplate'; required: false };
        touchStartLongPress: { alias: 'touchStartLongPress'; required: false };
        autoScroll: { alias: 'autoScroll'; required: false };
    },
    {
        dragPointerDown: 'dragPointerDown';
        dragStart: 'dragStart';
        ghostElementCreated: 'ghostElementCreated';
        dragging: 'dragging';
        dragEnd: 'dragEnd';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

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

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>

property elementRef

elementRef: ElementRef<HTMLElement>;

property ɵdir

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

property ɵfac

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

class DroppableDirective

class DroppableDirective implements OnInit, OnDestroy {}

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: { alias: 'dragOverClass'; required: false };
        dragActiveClass: { alias: 'dragActiveClass'; required: false };
        validateDrop: { alias: 'validateDrop'; required: false };
    },
    {
        dragEnter: 'dragEnter';
        dragLeave: 'dragLeave';
        dragOver: 'dragOver';
        drop: 'drop';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

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

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

index.d.ts

Dependencies (2)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

@angular/core

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/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>

Updated 1 month ago.
Package analyzed in 3316 ms.
Missing or incorrect documentation? Open an issue for this package.

angular-draggable-droppable

Install

Overview

Index

Classes

Interfaces

Type Aliases

Classes

class DragAndDropModule

Deprecated

property ɵfac

property ɵinj

property ɵmod

class DraggableDirective

property autoScroll

property dragActiveClass

property dragAxis

property dragCursor

property dragEnd

property dragging

property dragPointerDown

property dragSnapGrid

property dragStart

property dropData

property ghostDragEnabled

property ghostElementAppendTo

property ghostElementCreated

property ghostElementTemplate

property ɵdir

property ɵfac

property pointerDown$

property pointerMove$

property pointerUp$

property showOriginalElementWhileDragging

property touchStartLongPress

property validateDrag

method ngOnChanges

method ngOnDestroy

method ngOnInit

class DraggableScrollContainerDirective

property elementRef

property ɵdir

property ɵfac

class DroppableDirective

property currentDragSubscription

property dragActiveClass

property dragEnter

property dragLeave

property dragOver

property dragOverClass

property drop

property ɵdir

property ɵfac

property validateDrop

method ngOnDestroy

method ngOnInit

Interfaces

interface DragEndEvent

property dragCancelled

interface DragMoveEvent

interface DragPointerDownEvent

interface DragStartEvent

property cancelDrag$

interface DropEvent

property clientX

property clientY

property dropData

property target

interface GhostElementCreatedEvent

property clientX

property clientY

property element

interface ValidateDragParams

property transform

interface ValidateDropParams

Type Aliases

type ValidateDrag

type ValidateDrop

Package Files (1)

Dependencies (2)