Placeholder

The placeholder is the element which indicates where the dragged item will be placed when the user drops it.

By default, the placeholder is a clone of the dragged element with a removed id attribute and having its visibility set to hidden so that it forms a visual gap. You can change the default placeholder of the Sortable by setting the placeholder configuration option

The placeholder element is appended to the Sortable DOM element container. As a result, jQuery index method returns unexpected results while dragging. To get the index of a given item in the Sortable collection, use the indexOf method of the widget.

Getting Started

The following example demonstrates how to build the placeholder from the dragged element.

    <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    <script>
        $("#sortable").kendoSortable({
            placeholder: function(element) {
                return element.clone().css({
                    "opacity": 0.3,
                    "border": "1px dashed #000000"
                });
            }
        });
    </script>

The following example demonstrates how to build a static placeholder.

    <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    <script>
        $("#sortable").kendoSortable({
            placeholder: "<li>Drop Here!</li>"
        });
    </script>

Positioning by Axis

By default, the 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 repositioned. If the axis is set to "x" or "y", the Sortable 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. The axis mode is useful when dragging is restricted within a container. For a runnable example, refer to the demo on constraints.

See Also

In this article
Not finding the help you need? Improve this article