jQuery UI sortable - unable to drag elements to the bottom of a connected list/column

Question

I'm having an issue with jQuery sortables. I'm using it to develop an iGoogle-like dashboard by creating 3 columns. All 3 contain sortable divs and are connected to each other using the connectWith option.

The issue I'm having is when trying to drop a div at the bottom of a sortable column; it just doesn't want to happen. It only works if I drag it over/past the bottom-most div that's already in the list I'm dragging to.

Is there any way to avoid this? Or maybe to create a dummy div fixed at the bottom of each column? ANY help on this would be MUCH appreciated!

Thanks in advance.

Answer 1

Old question but maybe to help others...

Padding works but changes your visual treatment.

Another solution is to use 'tolerance' provided by the sortable api. A tolerance value of 'pointer' means that as long as the users cursor is over one of the other elements the item can replace its position (instead of being a certain amount of space over the element which is the reason you have trouble without padding).

Try adding this to your initialization (in my example I am sorting a list vertically).

      $(this.$el).sortable({
            axis: 'y',
            cursor: 'move',
            containment: 'parent',
            tolerance: 'pointer' // this is the important bit
        });

It should be very snappy after you do that.

Also you can see the jquery doc on it here: http://api.jqueryui.com/sortable/#option-tolerance

Answer 2

The columns that contain the divs need a reasonably large padding-bottom to extend the draggable area beyond the bottom div. Otherwise, the columns hug the divs tightly and the area underneath each bottom div lies outside the sortable list.