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

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 dra开发者_Go百科g 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.

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

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.