JQuery UI, Combining Sortable with Droppable

Maybe I'm misunderstanding the problem, but I don't think it has anything to do with the "page switching". If you turn on both pages at the same time and try to drag "Box 1" to a position above "Box 4", you'll see that it doesn't trigger that "Box 4"'s Sortable has received the Draggable until you go below "Box 4". This doesn't solve your problem, but perhaps will help you look in a better area for the solution.

See http://jsfiddle.net/nkBNP/7/ for a JSFiddle that demonstrates what I mean.

At least for the top down drop in I think the solution is somewhere in setting the box class to draggable and link it to the sortable object.

$(".box").draggable({    tolerance: 'point',    connectToSortable: '.column',    snap:false,    helper : 'clone',});

This example creates a duplicate of the box but it does allow me to drag box 1 up to page 2 and slowly drag it down above box 5 and get placed into the top spot. It is very sensitive though. You may need to adjust the grids and snap to get it to work consistently for the casual user.

I can certainly imagine that a sortable object wouldn't expect something to come down from the top, because it expects things to be sorted from within the container. Droppable on the other hand expects things to enter from any direction.

Yeah adding $('.column').sortable("refresh");to end of the show_page(id) function worked for me (only tested in firefox minefield):

function show_page(id) {    $('.page').removeClass('page_active');    $('#page_'+id).addClass('page_active');    $('.column').sortable("refresh");}