1

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!

Improve this question

1 Answer 1

Reset to default
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/.
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the quick response and feedback! The problem is that both the end boxes, that is the boxes on the far left and right need to be up against the edge of the container/table :/ This was the reason for the spacing elements. With this new layout, they are not. Any ideas? (jsfiddle.net/JsJMH/10 - with border to show edges)
Hmm. . . if this is what you want, we'll need to do JavaScript magic for either solution. It's not as simple as disabling your spacer td's or somehow binding the bar with a spacer. If you moved the first element to the last, they it'd take it's spacer with it and you'd end up with a funky layout.
jsfiddle.net/morrison/quneb updated. Because of rounding it doesn't quite get it perfectly aligned. I'm working on a better algorithm, but wanted to share the progress.
Above comment's link should have been jsfiddle.net/morrison/quneb/7, sorry.
BTW, the code I have needs to be modified to work with the internals of sortable and run after every sort.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.