Jquery ui - sortable: drag and drop on the handle icon within the element to be sorted

Question

I have jquery ui sorts that work fine, but my sorted elements have other interactive elements inside them. In order to avoid random sorting when interacting with elements in sortable divs, I would like to somehow make moving displacement for sorters occur only when dragging a certain element in sortable form, for example, the "move" icon, which can be in the upper left corner of each sort. Is this possible with generic jqui, or do I need to write my own hook?

Answer 1

The handle option of the plugin allows you to determine what is an element that can trigger sorting, you can provide a selector or element.

If you have this html, with .handler will be a handle to start sorting:

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

Apply this parameter as follows:

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

You can style your control as you like.