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?

Solution

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.

Comments

[Rimer]

OMG can't believe i didn't see this in the documentation for sortable, but there it is right in the OPTIONS section...

[Rimer]

Hmm seems like in IE7 (quirks mode in IE9), it doesn't work :(. The handle doesn't work, and since it was limited to the handle alone, sorting is now disabled in IE7 :(. Works in FF, IE9, Chrome...

[Rimer]

This is with jquery 1.7 and jq ui 1.8

[Didier Ghys]

I've run, if I recall correctly, into a similar problem once. I've managed to apply a workaround presenter in bug ticket but I think it is fixed in latest jquery ui 1.8.16 now. Maybe it is not related but those problems are tricky to track down.

[Rimer]

Ok confirmed there's still a problem in IE7 with jqui 1.8.16... It seems to only drag like 1 out of 10 attempts, otherwise the cursor turns to the "cancel" symbol instead, and nothing drags :(

[Rimer]

Well i couldn't solve the issue with IE7 not dragging properly from the handle, so I'm using jquery's browser detection to NOT assign a handle in these problematic browsers, allowing the entire content div that is sortable to be draggable in those browsers (which DOES work)... oh well.

[Rohit Singh Sengar]

What if I want to add two handles?

[Didier Ghys]

@RohitSengar. handle property accepts a selector. I guess you could write something like this { handle: '.handle1, .handle2' } like you would do for selecting multiple elements. Give it a try.

[Nishant Mendiratta]

@DidierGhys Thanks, This library is so cool, they have solution of every possible scenario. Really Nice.

[Tigran Babajanyan]

And what if I want disable for specific class elements?