Example

The Placeholder is the element which indicates where the dragged item will be placed when dropped. By default, the Placeholder is a clone of the dragged element with a removed id attribute, and visibility set to hidden to form a visual gap.

Important

The placeholder element is appended to the Sortable DOM element container. Because of this, jQuery's index method returns unexpected results while dragging. If you want to get the index of a given item in the Sortable collection, use widget's indexOf method.

Customize the Placeholder

You can change the default Placeholder by setting the placeholder configuration option.

The example below demonstrates how to build the Placeholder from the dragged element.

The cursor configuration option determines the type of cursor to be displayed while the user drags a sortable item. There are several build-in cursor types you can choose from. A full list is available at quirksmode.org.

The example below demonstrates how to change the cursor type to "move".

The filter option specifies which items inside the Sortable's container will be sortable. Items not matching the filter selector will neither be draggable, nor reordered, when the user drags a sortable item over them.

The disabled option specifies which items inside the Sortable's container cannot be dragged. Items matching the disabled selector cannot be dragged, but will reorder, when the user drags a sortable item over them.

By default, Kendo UI Sortable uses the mouse cursor to determine the place of the drop Placeholder. This means that if the mouse cursor is not over a sortable item, the Placeholder will not be re-positioned.

If the axis is set to "x" or "y", the widget will start operating in movement by axis mode. The widget will use only the x or y coordinate of the mouse cursor to determine the position of the Placeholder. This mode is useful when dragging is restricted in a container.

The Sortable widget does not persist the order of the current items. If you want to detect when changes in the order occur and save them either in local storage, or submit them to the server with jQuery.ajax, use the change event. To restore the Sortable layout, render the DOM elements in their last order.

The example below demonstrates how to persist the order of items in local storage.

A Sortable with radio buttons and a Hint cloned from the Sortable element will lose the selected radio if dragged, because the clone will take over the selection. To avoid this, clear the name of the radio in the Hint, as demonstrated in the example below.

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Frameworks

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.