Sortable

Example

Razor

<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-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
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	The name of the JavaScript function that will handle the cancel event. Fires when item sorting is canceled by pressing the Escape key.
on-change	String	The name of the JavaScript function that will handle the change event. Fires when item is sorted and the item's position is changed in the DOM.
on-end	String	The name of the JavaScript function that will handle the end event. 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	The name of the JavaScript function that will handle the move event. Fires when Sortable's placeholder changes its position.
on-start	String	The name of the JavaScript function that will handle the start event. 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.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.