ng2-dragula

  • Version 2.1.1
  • Published
  • 531 kB
  • 2 dependencies
  • 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[]>;

                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 {}

                            method forRoot

                            static forRoot: () => ModuleWithProviders;

                              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 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 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: string, callback: Function) => any;

                                                                                              method remove

                                                                                              remove: () => any;

                                                                                                method start

                                                                                                start: (item: Element) => any;

                                                                                                  Interfaces

                                                                                                  interface DragulaOptions

                                                                                                  interface DragulaOptions<T = any> extends OriginalOptions {}

                                                                                                    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[][];

                                                                                                          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'

                                                                                                                                  Namespaces

                                                                                                                                  namespace testdouble-jasmine

                                                                                                                                  module 'testdouble-jasmine' {}

                                                                                                                                    function get

                                                                                                                                    get: (td: any) => CustomMatcherFactories;

                                                                                                                                      function use

                                                                                                                                      use: (td: any) => any;

                                                                                                                                        Package Files (11)

                                                                                                                                        Dependencies (2)

                                                                                                                                        Dev Dependencies (34)

                                                                                                                                        Peer Dependencies (2)

                                                                                                                                        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>