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

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

                                                                                                                                                    Dev Dependencies (0)

                                                                                                                                                    No dev dependencies.

                                                                                                                                                    Peer Dependencies (6)

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