Jquery ui sortable - Drag and drop does not work properly when using containment

Question

I have a problem with jquery ui sortable where I cannot drag certain elements (I think due to the height of the elements of the element)

<div class="container"> <fieldset> <legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend> <div>blah<br /></div> </fieldset> <fieldset> <legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend> <div style="display: none">blah<br /></div> </fieldset> 

 $(".container").sortable({ axis: 'y', handle: '> legend', containment: 'parent', /*cursorAt: {top: 1}, start: function(event, ui) { ui.placeholder.height(ui.item.height()); $(this).sortable('refreshPositions'); },*/ });​ 

see http://jsfiddle.net/ADyhR/10/ EDIT: It seems to work in jquery ui 1.8.9. Is this just a bug in 1.8.18?

javascript comment lines are the things that I tried but didn't work, but I thought I could just get a little distracted from how I used them.

Answer 1

You can use the tolerance option and set its tolerance: "pointer", value tolerance: "pointer", I updated your DEMO and created NEW DEMO .

Here is the JS code that works with the added tolerance option :

 $(".container").sortable({ axis: 'y', tolerance: "pointer", handle: '> legend', containment: 'parent', /*cursorAt: {top: 1}, start: function(event, ui) { ui.placeholder.height(ui.item.height()); $(this).sortable('refreshPositions'); },*/ });