79

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?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Rimer
  • 2,054
  • 6
  • 28
  • 43

1 Answers1

166

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.

gvlasov
  • 18,638
  • 21
  • 74
  • 110
Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
  • 4
    OMG can't believe i didn't see this in the documentation for sortable, but there it is right in the OPTIONS section... – Rimer Dec 18 '11 at 20:46
  • 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 Dec 18 '11 at 21:00
  • This is with jquery 1.7 and jq ui 1.8 – Rimer Dec 18 '11 at 21:02
  • I've run, if I recall correctly, into a similar problem once. I've managed to apply a workaround presenter in [bug ticket](http://bugs.jqueryui.com/ticket/4333) 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. – Didier Ghys Dec 18 '11 at 21:10
  • 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 Dec 19 '11 at 03:26
  • 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. – Rimer Dec 19 '11 at 03:58
  • What if I want to add two handles? – Rohit Singh Sengar Jul 16 '13 at 13:07
  • 2
    @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. – Didier Ghys Jul 16 '13 at 15:48
  • @DidierGhys Thanks, This library is so cool, they have solution of every possible scenario. Really Nice. – Nishant Mendiratta Apr 28 '17 at 08:44
  • And what if I want disable for specific class elements? – Tigran Babajanyan Jul 31 '17 at 09:59