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 elements within the sortable divs, I'd like to somehow make the dragging movement for the sortables only occur when dragging a certain element within the sortable, such as a 'move' icon that might reside in the top left corner of each sortable. Is this possible with generic jqui, or would I need to write my own hook?

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.