Sortable

Example

<kendo-sortable>
    <cursor-offset />
</kendo-sortable>

ChildTags

Tag Name Details
cursor-offset SortableCursorOffsetSettingsTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
as-child-component Boolean
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
auto-scroll Boolean If set to true the widget will auto-scroll the container when the mouse/finger is close to the top/bottom of it.
axis SortableAxis Constrains the hint movement to either the horizontal (x) or vertical (y) axis. Can be set to either "x" or "y".
connect-with String Selector which determines if items from the current Sortable widget can be accepted from another Sortable container(s). The connectWith option describes one way relationship, if the developer wants a two way connection then the connectWith option should be set on both widgets.
container String Selector that determines the container to which boundaries the hint movement will be constrained.
cursor String The cursor that will be shown while user drags sortable item.
disabled String Selector that determines which items are disabled. Disabled items cannot be dragged but are valid sort targets.
filter String Selector that determines which items are sortable. Filtered items cannot be dragged and are not valid sort targets.
handler String Selector that determines which element will be used as a draggable handler. If a handler is defined, the user will be able to move the Sortable items only if the cursor/finger is positioned onto the handler element.
hint String Provides a way for customization of the sortable item hint. If a function is supplied, it receives one argument - the draggable element's jQuery object. If hint function is not provided the widget will clone dragged item and use it as a hint.
hold-to-drag Boolean Suitable for touch oriented user interface, in order to avoid collision with the touch scrolling gesture. When set to true, the item will be activated after the user taps and holds the finger on the element for a short amount of time. The item will also be activated by pressing, holding and lifting the finger without any movement. Dragging it afterwards will initiate the drag immediately.
ignore String Selector that determines which elements inside the sorted item's container will be ignored. Useful if the sortable item contains input elements.
on-cancel String Fires when item sorting is canceled by pressing the Escape key.
on-change String Fires when item is sorted and the item's position is changed in the DOM.
on-end String Fires when item dragging ends but before the item's position is changed in the DOM. This event is suitable for preventing the sort action.
on-move String Fires when Sortable's placeholder changes its position.
on-start String Fires when sortable item drag starts.
placeholder String Provides a way for customization of the sortable item placeholder. If a function is supplied, it receives one argument - the draggable element's jQuery object. If placeholder function is not provided the widget will clone dragged item, remove its ID attribute, set its visibility to hidden and use it as a placeholder.
In this article
Not finding the help you need?