So I have three tables that are made up to look like an overall table.

A B C D E F G H I 1 x x x x x x x x 2 x x x x x x x x 3 x x x x x x x x 4 x x x x x x x x 5 x x x x x x x x

I've made the top table (a,b,c,d,e,f,g,i) fixed along with the left table (1,2,3,4,5). When you scroll around in the middle table (all the x's) the top and left tables move with the scroll but stay visible (x's go behind).

This is great, but now I'm trying to get the same affect using jquery draggable, so a user should be able to click and drag the x's table, top and left will move accordingly but always be visible.

I've managed to get the middle table draggable but can't get the other tables to follow it, or for it all to be constrained so you don't end up messing up all the rows and columns.

Anyone any ideas? (open to not using 3 tables as well, or tables at all!)