ng2-dragula
- Version 5.1.0
- Published
- 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
Index
Variables
Functions
Classes
Interfaces
Enums
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;
method subscribe
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()
. Useemit()
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)
, andtarget.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
anddrop
, 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 ensurex !== 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)
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 .
Package analyzed in 4308 ms. - Missing or incorrect documentation? Open an issue for this package.