import Sortable from '@shopify/draggable/src/Sortable/Sortable.js'

public class | source

Sortable

Extends:

* → Sortable

Sortable is built on top of Draggable and allows sorting of draggable elements. Sortable will keep track of the original index and emits the new index as you drag over draggable elements.

Constructor Summary

Public Constructor
public	constructor(containers: HTMLElement[] \| NodeList \| HTMLElement, options: Object) Sortable constructor.

Member Summary

Public Members
public	startContainer: HTMLElement start container on drag start
public	startIndex: Number start index of source on drag start

Method Summary

Public Methods
public	destroy() Destroys Sortable instance.
public	getSortableElementsForContainer(container: HTMLElement): HTMLElement[] Returns sortable elements for a given container, excluding the mirror and original source element if present
public	index(element: HTMLElement): Number Returns true index of element within its container during drag operation, i.e.

Private Methods
private	[onDragOverContainer](event: DragOverContainerEvent) Drag over container handler
private	[onDragOver](event: DragOverEvent) Drag over handler
private	[onDragStart](event: DragStartEvent) Drag start handler
private	[onDragStop](event: DragStopEvent) Drag stop handler

Public Constructors

public constructor(containers: HTMLElement[] | NodeList | HTMLElement, options: Object) source

Sortable constructor.

Params:

Name	Type	Attribute	Description
containers	HTMLElement[] \| NodeList \| HTMLElement		Sortable containers
options	Object		Options for Sortable

Public Members

public startContainer: HTMLElement source

start container on drag start

Properties:

Name	Type	Attribute	Description
startContainer	*

public startIndex: Number source

start index of source on drag start

Properties:

Name	Type	Attribute	Description
startIndex	*

Public Methods

public destroy() source

Destroys Sortable instance.

public getSortableElementsForContainer(container: HTMLElement): HTMLElement[] source

Returns sortable elements for a given container, excluding the mirror and original source element if present

Params:

Name	Type	Attribute	Description
container	HTMLElement

Return:

HTMLElement[]

public index(element: HTMLElement): Number source

Returns true index of element within its container during drag operation, i.e. excluding mirror and original source

Params:

Name	Type	Attribute	Description
element	HTMLElement		An element

Return:

Number

Private Methods

private [onDragOverContainer](event: DragOverContainerEvent) source

Drag over container handler

Params:

Name	Type	Attribute	Description
event	DragOverContainerEvent		Drag over container event

private [onDragOver](event: DragOverEvent) source

Drag over handler

Params:

Name	Type	Attribute	Description
event	DragOverEvent		Drag over event

private [onDragStart](event: DragStartEvent) source

Drag start handler

Params:

Name	Type	Attribute	Description
event	DragStartEvent		Drag start event

private [onDragStop](event: DragStopEvent) source

Drag stop handler

Params:

Name	Type	Attribute	Description
event	DragStopEvent		Drag stop event