ng2-dragula

ng2-dragula

Version 5.1.0
Published 9 days ago
174 kB
1 dependency
MIT license

Install

npm i ng2-dragula

yarn add ng2-dragula

pnpm add ng2-dragula

Overview

Simple drag and drop with dragula

Variables

variable MockDrakeFactory

const MockDrakeFactory: DrakeFactory;

Functions

function dragula

dragula: (containers?: any, options?: any) => any;

Classes

class DragulaDirective

class DragulaDirective implements OnChanges, OnDestroy {}

constructor

constructor(el: ElementRef, dragulaService: DragulaService);

property dragula

dragula?: string;

property dragulaModel

dragulaModel?: any[];

property dragulaModelChange

dragulaModelChange: EventEmitter<any[]>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DragulaDirective,
    '[dragula]',
    never,
    {
        dragula: { alias: 'dragula'; required: false };
        dragulaModel: { alias: 'dragulaModel'; required: false };
    },
    { dragulaModelChange: 'dragulaModelChange' },
    never,
    never,
    false,
    never
>;

property ɵfac

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

method ngOnChanges

ngOnChanges: (changes: {
    dragula?: SimpleChange;
    dragulaModel?: SimpleChange;
}) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method setup

setup: () => void;

subscribe: (name: string) => void;

method teardown

teardown: (groupName: string) => void;

class DragulaModule

class DragulaModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    DragulaModule,
    [typeof i1.DragulaDirective],
    never,
    [typeof i1.DragulaDirective]
>;

method forRoot

static forRoot: () => ModuleWithProviders<DragulaModule>;

class DragulaService

class DragulaService {}

constructor

constructor(drakeFactory: DrakeFactory);

property cancel

cancel: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
}>;

property cloned

cloned: (
    groupName?: string
) => Observable<{
    name: string;
    clone: Element;
    original: Element;
    cloneType: 'mirror' | 'copy';
}>;

property drag

drag: (
    groupName?: string
) => Observable<{ name: string; el: Element; source: Element }>;

property dragend

dragend: (groupName?: string) => Observable<{ name: string; el: Element }>;

property drop

drop: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    target: Element;
    source: Element;
    sibling: Element;
}>;

property dropModel

dropModel: <T = any>(
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    target: Element;
    source: Element;
    sibling: Element;
    item: T;
    sourceModel: T[];
    targetModel: T[];
    sourceIndex: number;
    targetIndex: number;
}>;

property out

out: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
}>;

property over

over: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
}>;

property ɵfac

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

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<DragulaService>;

property remove

remove: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
}>;

property removeModel

removeModel: <T = any>(
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
    item: T;
    sourceModel: T[];
    sourceIndex: number;
}>;

property shadow

shadow: (
    groupName?: string
) => Observable<{
    name: string;
    el: Element;
    container: Element;
    source: Element;
}>;

method add

add: (group: Group) => Group;

Public mainly for testing purposes. Prefer createGroup().

method createGroup

createGroup: <T = any>(name: string, options: DragulaOptions<T>) => Group;

Creates a group with the specified name and options.
Note: formerly known as setOptions

method destroy

destroy: (name: string) => void;

method find

find: (name: string) => Group;

class DrakeFactory

class DrakeFactory {}

constructor

constructor(build?: DrakeBuilder);

property build

build: DrakeBuilder;

class Group

class Group {}

constructor

constructor(name: string, drake: DrakeWithModels, options: DragulaOptions<any>);

property drake

drake: DrakeWithModels;

property initEvents

initEvents: boolean;

property name

name: string;

property options

options: DragulaOptions<any>;

class MockDrake

class MockDrake implements DrakeWithModels {}

You can use MockDrake to simulate Drake events.
The three methods that actually do anything are on(event, listener), destroy(), and a new method, emit(). Use emit() to manually emit Drake events, and if you injected MockDrake properly with MockDrakeFactory or mocked the DragulaService.find() method, then you can make ng2-dragula think drags and drops are happening.
Caveats:
1. YOU MUST MAKE THE DOM CHANGES YOURSELF. 2. REPEAT: YOU MUST MAKE THE DOM CHANGES YOURSELF. That means source.removeChild(el), and target.insertBefore(el). 3. None of the other methods do anything. That's ok, because ng2-dragula doesn't use them.

constructor

constructor(
    containers?: Element[],
    options?: DragulaOptions<any>,
    models?: any[][]
);

Parameter containers
A list of container elements.
Parameter options
These will NOT be used. At all.
Parameter models
Nonstandard, but useful for testing using new MockDrake() directly. Note, default value is undefined, like a real Drake. Don't change that.

property containers

containers: Element[];

property dragging

dragging: boolean;

property models

models?: any[][];

property options

options: DragulaOptions<any>;

method cancel

cancel: { (revert: boolean): any; (): any };

method canMove

canMove: (item: Element) => boolean;

method destroy

destroy: () => any;

method emit

emit: (eventType: EventTypes, ...args: any[]) => void;

This is the most useful method. You can use it to manually fire events that would normally be fired by a real drake.
You're likely most interested in firing drag, remove and drop, the three events DragulaService uses to implement [dragulaModel].
See https://github.com/bevacqua/dragula#drakeon-events for what you should emit (and in what order).
(Note also, firing dropModel and removeModel won't work. You would have to mock DragulaService for that.)

method end

end: () => any;

method on

on: {
    (event: 'drag', listener: (el: Element, source: Element) => void): Drake;
    (event: 'dragend', listener: (el: Element) => void): Drake;
    (
        event: 'drop',
        listener: (
            el: Element,
            target: Element,
            source: Element,
            sibling: Element
        ) => void
    ): Drake;
    (
        event: 'cancel' | 'remove' | 'shadow' | 'over' | 'out',
        listener: (el: Element, container: Element, source: Element) => void
    ): Drake;
    (
        event: 'cloned',
        listener: (
            clone: Element,
            original: Element,
            type: 'mirror' | 'copy'
        ) => void
    ): Drake;
    (
        event: 'dropModel',
        listener: ([
            el,
            target,
            source,
            sibling,
            item,
            sourceModel,
            targetModel,
            sourceIndex,
            targetIndex,
        ]: [
            Element,
            Element,
            Element,
            Element,
            any,
            any[],
            any[],
            number,
            number
        ]) => void
    ): Drake;
    (
        event: 'removeModel',
        listener: ([el, container, source, item, sourceModel, sourceIndex]: [
            Element,
            Element,
            Element,
            any,
            any[],
            number
        ]) => void
    ): Drake;
};

method remove

remove: () => any;

method start

start: (item: Element) => any;

Interfaces

interface DragulaOptions

interface DragulaOptions<T = any> extends Omit<OriginalOptions, 'copySortSource'> {}

property copyItem

copyItem?: (item: T) => T;

You must provide this if you are using copy with [dragulaModel]. It is responsible for cloning a model item. Your implementation should ensure x !== copyItem(x) -- so you must create a *new* object.

property copySortSource

copySortSource?: boolean | ((el: Element, source: Element) => boolean);

interface DrakeWithModels

interface DrakeWithModels extends Drake {}

property models

models?: any[][];

method on

on: {
    (event: 'drag', listener: (el: Element, source: Element) => void): Drake;
    (event: 'dragend', listener: (el: Element) => void): Drake;
    (
        event: 'drop',
        listener: (
            el: Element,
            target: Element,
            source: Element,
            sibling: Element
        ) => void
    ): Drake;
    (
        event: 'cancel' | 'remove' | 'shadow' | 'over' | 'out',
        listener: (el: Element, container: Element, source: Element) => void
    ): Drake;
    (
        event: 'cloned',
        listener: (
            clone: Element,
            original: Element,
            type: 'mirror' | 'copy'
        ) => void
    ): Drake;
    (
        event: 'dropModel',
        listener: ([
            el,
            target,
            source,
            sibling,
            item,
            sourceModel,
            targetModel,
            sourceIndex,
            targetIndex,
        ]: [
            Element,
            Element,
            Element,
            Element,
            any,
            any[],
            any[],
            number,
            number
        ]) => void
    ): Drake;
    (
        event: 'removeModel',
        listener: ([el, container, source, item, sourceModel, sourceIndex]: [
            Element,
            Element,
            Element,
            any,
            any[],
            number
        ]) => void
    ): Drake;
};

Enums

enum EventTypes

enum EventTypes {
    Cancel = 'cancel',
    Cloned = 'cloned',
    Drag = 'drag',
    DragEnd = 'dragend',
    Drop = 'drop',
    Out = 'out',
    Over = 'over',
    Remove = 'remove',
    Shadow = 'shadow',
    DropModel = 'dropModel',
    RemoveModel = 'removeModel',
}

member Cancel

Cancel = 'cancel'

member Cloned

Cloned = 'cloned'

member Drag

Drag = 'drag'

member DragEnd

DragEnd = 'dragend'

member Drop

Drop = 'drop'

member DropModel

DropModel = 'dropModel'

member Out

Out = 'out'

member Over

Over = 'over'

member Remove

Remove = 'remove'

member RemoveModel

RemoveModel = 'removeModel'

member Shadow

Shadow = 'shadow'

Package Files (10)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (6)

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/ng2-dragula.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ng2-dragula)

HTML

<a href="https://www.jsdocs.io/package/ng2-dragula"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 3 days ago.
Package analyzed in 4308 ms.
Missing or incorrect documentation? Open an issue for this package.

ng2-dragula

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Variables

variable MockDrakeFactory

Functions

function dragula

Classes

class DragulaDirective

constructor

property dragula

property dragulaModel

property dragulaModelChange

property ɵdir

property ɵfac

method ngOnChanges

method ngOnDestroy

method setup

method subscribe

method teardown

class DragulaModule

property ɵfac

property ɵinj

property ɵmod

method forRoot

class DragulaService

constructor

property cancel

property cloned

property drag

property dragend

property drop

property dropModel

property out

property over

property ɵfac

property ɵprov

property remove

property removeModel

property shadow

method add

method createGroup

method destroy

method find

class DrakeFactory

constructor

property build

class Group

constructor

property drake

property initEvents

property name

property options

class MockDrake

constructor

Parameter containers

Parameter options

Parameter models

property containers

property dragging

property models

property options

method cancel

method canMove

method destroy

method emit

method end

method on

method remove

method start

Interfaces

interface DragulaOptions

property copyItem

property copySortSource