Class OrderableController

Enables the ability for drag & drop or manual re-ordering of elements within a prescribed container or the controlled element.

Once re-ordering is completed an async request will be made to the provided URL to submit the update per item.

Example

<fieldset data-controller="w-orderable" data-w-orderable-url-value="/path/to/orderable/">
  <input type="button" data-w-orderable-target="item" data-w-orderable-item-id="1" value="Item 1"/>
  <input type="button" data-w-orderable-target="item" data-w-orderable-item-id="2" value="Item 2"/>
  <input type="button" data-w-orderable-target="item" data-w-orderable-item-id="3" value="Item 3"/>
</fieldset>

Hierarchy

Controller<HTMLElement>
- OrderableController

Constructors

constructor

new OrderableController(context: any): OrderableController
Parameters
- context: any
Returns OrderableController
Overrides Controller<HTMLElement>.constructor
- Defined in controllers/OrderableController.ts:61

Properties

`Readonly`activeClasses

activeClasses: string[]

animationValue

animationValue: number

Transition animation duration for re-ordering.

`Readonly`chosenClass

chosenClass: string

containerValue

containerValue: string

A selector to determine the container that will be the parent of the orderable elements.

`Readonly`context

context: Context

`Readonly`dragClass

dragClass: string

`Readonly`ghostClass

ghostClass: string

`Readonly`handleTarget

handleTarget: HTMLElement

`Readonly`hasChosenClass

hasChosenClass: boolean

`Readonly`hasDragClass

hasDragClass: boolean

`Readonly`hasGhostClass

hasGhostClass: boolean

`Readonly`itemTarget

itemTarget: HTMLElement

messageValue

messageValue: string

A translated message template for when the update is successful, replaces __LABEL__ with item's title.

order

order: string[]

sortable

sortable: any

urlValue

urlValue: string

Base URL template to use for submitting an updated order for a specific item.

`Static`blessings

blessings: (<T>(constructor: Constructor<T>) => any)[]

`Static`classes

classes: string[] = ...

`Static`outlets

outlets: string[]

`Static`targets

targets: string[] = ...

`Static`values

values: {
    animation: { default: number; type: NumberConstructor };
    container: { default: string; type: StringConstructor };
    message: { default: string; type: StringConstructor };
    url: StringConstructor;
} = ...

Accessors

application

get application(): Application
Returns Application
Inherited from Controller.application
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:23

classes

get classes(): ClassMap
Returns ClassMap
Inherited from Controller.classes
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:29

data

get data(): DataMap
Returns DataMap
Inherited from Controller.data
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:30

element

get element(): ElementType
Returns ElementType
Inherited from Controller.element
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:25

identifier

get identifier(): string
Returns string
Inherited from Controller.identifier
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:26

options

get options(): {
    animation: number;
    chosenClass?: string;
    dataIdAttr: string;
    dragClass?: string;
    draggable: string;
    ghostClass?: string;
    handle: string;
    onEnd: (
        __namedParameters: {
            item: HTMLElement;
            newIndex: number;
            oldIndex: number;
        },
    ) => void;
    onStart: () => void;
}
Returns {
    animation: number;
    chosenClass?: string;
    dataIdAttr: string;
    dragClass?: string;
    draggable: string;
    ghostClass?: string;
    handle: string;
    onEnd: (
        __namedParameters: {
            item: HTMLElement;
            newIndex: number;
            oldIndex: number;
        },
    ) => void;
    onStart: () => void;
}
- Defined in controllers/OrderableController.ts:81

outlets

get outlets(): OutletSet
Returns OutletSet
Inherited from Controller.outlets
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:28

scope

get scope(): Scope
Returns Scope
Inherited from Controller.scope
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:24

targets

get targets(): TargetSet
Returns TargetSet
Inherited from Controller.targets
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:27

`Static`shouldLoad

get shouldLoad(): boolean
Returns boolean
Inherited from Controller.shouldLoad
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:19

Methods

apply

apply(__namedParameters: Event): void
Applies a manual move using up/down methods.
Parameters
- __namedParameters: Event
Returns void
- Defined in controllers/OrderableController.ts:128

connect

connect(): void
Returns void
Overrides Controller.connect
- Defined in controllers/OrderableController.ts:66

disconnect

disconnect(): void
Returns void
Overrides Controller.disconnect
- Defined in controllers/OrderableController.ts:224

dispatch

dispatch(
    eventName: string,
    __namedParameters?: Partial<
        {
            bubbles: boolean;
            cancelable: boolean;
            detail: Object;
            prefix: string;
            target: Element
            | Window
            | Document;
        },
    >,
): CustomEvent<Object>
Parameters
- eventName: string
- Optional__namedParameters: Partial<
      {
          bubbles: boolean;
          cancelable: boolean;
          detail: Object;
          prefix: string;
          target: Element
          | Window
          | Document;
      },
  >
Returns CustomEvent<Object>
Inherited from Controller.dispatch
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:34

down

down(event: KeyboardEvent): void
Manually move down visually but do not submit to the server.
Parameters
- event: KeyboardEvent
Returns void
- Defined in controllers/OrderableController.ts:173

getItemData

getItemData(target: EventTarget | null): { id: string; label: string }
Parameters
- target: EventTarget | null
Returns { id: string; label: string }
- Defined in controllers/OrderableController.ts:111

initialize

initialize(): void
Returns void
Inherited from Controller.initialize
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:31

move

move(__namedParameters: Event, direction: Direction): void
Calculate a manual move either up or down and prepare the Sortable data for re-ordering.
Parameters
- __namedParameters: Event
- direction: Direction
Returns void
- Defined in controllers/OrderableController.ts:138

submit

submit(__namedParameters: { id: string; label: string; newIndex: number }): void
Submit an updated ordering to the server.
Parameters
- __namedParameters: { id: string; label: string; newIndex: number }
Returns void
- Defined in controllers/OrderableController.ts:181

up

up(event: KeyboardEvent): void
Manually move up visually but do not submit to the server.
Parameters
- event: KeyboardEvent
Returns void
- Defined in controllers/OrderableController.ts:165

`Static`afterLoad

afterLoad(_identifier: string, _application: Application): void
Parameters
- _identifier: string
- _application: Application
Returns void
Inherited from Controller.afterLoad
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:20

Class OrderableController

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns OrderableController

Properties

ReadonlyactiveClasses

animationValue

ReadonlychosenClass

containerValue

Readonlycontext

ReadonlydragClass

ReadonlyghostClass

ReadonlyhandleTarget

ReadonlyhasChosenClass

ReadonlyhasDragClass

ReadonlyhasGhostClass

ReadonlyitemTarget

messageValue

order

sortable

urlValue

Staticblessings

Staticclasses

Staticoutlets

Statictargets

Staticvalues

Accessors

application

Returns Application

classes

Returns ClassMap

data

Returns DataMap

element

Returns ElementType

identifier

Returns string

options

Returns { animation: number; chosenClass?: string; dataIdAttr: string; dragClass?: string; draggable: string; ghostClass?: string; handle: string; onEnd: ( __namedParameters: { item: HTMLElement; newIndex: number; oldIndex: number; }, ) => void; onStart: () => void;}

outlets

Returns OutletSet

scope

Returns Scope

targets

Returns TargetSet

StaticshouldLoad

Returns boolean

Methods

apply

Parameters

Returns void

connect

Returns void

disconnect

Returns void

dispatch

Parameters

Returns CustomEvent<Object>

down

Parameters

Returns void

getItemData

Parameters

Returns { id: string; label: string }

initialize

Returns void

move

Parameters

Returns void

submit

Parameters

Returns void

`Readonly`activeClasses

`Readonly`chosenClass

`Readonly`context

`Readonly`dragClass

`Readonly`ghostClass

`Readonly`handleTarget

`Readonly`hasChosenClass

`Readonly`hasDragClass

`Readonly`hasGhostClass

`Readonly`itemTarget

`Static`blessings

`Static`classes

`Static`outlets

`Static`targets

`Static`values

Returns {
animation: number;
chosenClass?: string;
dataIdAttr: string;
dragClass?: string;
draggable: string;
ghostClass?: string;
handle: string;
onEnd: (
__namedParameters: {
item: HTMLElement;
newIndex: number;
oldIndex: number;
},
) => void;
onStart: () => void;
}

`Static`shouldLoad

`Static`afterLoad