Sortable
Sortable allows you to rearrange a group of html elements.
Selector
smart-sortable
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
disabledboolean
Enables or disables sorting.
Default valuefalse
dragModeSortableDragMode
Sets or gets the way a sortable item can be dragged - by dragging the item itself ('item') or by dragging a handle that appears next to the item ('handle').
Default valueitem
handlePositionSortableHandlePosition
Sets or gets the the position of the drag handle relative to its respective sortable item. Applicable only when dragMode is 'handle'.
Default valueright
handleVisibilitySortableHandleVisibility
Sets or gets whether a sortable item's drag handle is always visible or is shown when the item is hovered. Applicable only when dragMode is 'handle'.
Default valuehover
itemsstring | null
Sets or gets a selector to determine the sortable items by. By default, sortable items are all children of the smart-sortable custom element.
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",
"methodInvalidValueType": "Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!",
"methodInvalidArgumentsCount": "Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!",
"methodInvalidReturnType": "Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to '{{files}}'.",
"htmlTemplateNotSuported": "{{elementType}}: Web Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
}
modeOrientation
Sets or gets the direction sortable items are stacked and can be dragged.
Default valuevertical
ondragend((this: Window, ev: Event) => any) | null
This event is triggered when sortable items have been reordered.
Arguments
evEvent
Methods
move( fromIndex?: number, toIndex?: number): void
Moves a sortable item from one index to another.
Arguments
fromIndex?number
The original index of the item.
toIndex?number
The index to move the item to.
updateItems(): void
Re-evaluates the items that can be sorted. Useful after items have been added to or removed from the custom element.