handler String(default: null)

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.

Example - Sortable widget with drag handlers

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

        handler: ".handler"

    .handler {
        width: 16px;
        height: 16px;
        background-color: #FF0000;
        display: inline-block;
In this article