Jquery ui - sortable: drag by icon 'handle' within sortable element

Question

I have jquery ui sortables working fine but my sortable elements have other interactive elements within them. In order to prevent accidental sorting when interacting with the el

Answer 1

The option handle of the plugin allows you to define that is the element that can initiate the sort. You can provide a selector or an element.

If you have this html, with the .handler to be the handle to start the sort:

<ul class="sortable">
    <li>
        <span class="handle"></span>
        My element
    </li>
</ul>

Apply the option like this:

$( ".sortable" ).sortable({ handle: '.handle' });

You can style your handle element however you like.