jQuery UI sortable on dynamic width table possible?

Question

Wondering if anyone can help with this.

I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.

Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.

I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.

Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?

I tried disabling the 'spacer' cells but could not really understand how its done :/

Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.

(The far right and left blocks need to be up against the end of the container)

JSFiddle: http://jsfiddle.net/JsJMH/

Any help would be really appreciated! Many thanks!

Answer 1

Answer: http://jsfiddle.net/morrison/JsJMH/13/

Notes:

• Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td .
• I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
• This is very possible without using tables: http://jsfiddle.net/morrison/quneb/ .