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

Question

Hi everyone,

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

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.