Question

I have content:

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

I’m using the columnizer plugin which separates my content into two columns like this:

<div class="first column" style="width:50%; float: left;">
  <div>content</div>
  <div>content</div>
  <div>content</div>
</div>
<div class="last column" style="width:50%; float: left;">
  <div>content</div>
  <div>content</div>
</div>

I’d also like to use JQuery’s Sortable function to make my content sortable. This requires that I add a UL wrapper and LI’s around each content section. However, the columnizer plugin breaks my sortable UL into two UL’s (with identical IDs…) allowing only the first column to be sortable:

<ul id='sortable'>
  <div class="first column" style="width:50%; float: left;">
    <li><div>content</div></li>
    <li><div>content</div></li>
    <li><div>content</div></li>
  </div>
</ul>                   //inserted by columnizer
<ul id='sortable'>      //inserted by columnizer
  <div class="last column" style="width:50%; float: left;">
    <li><div>content</div></li>
    <li><div>content</div></li>
  </div>
</ul>

• Can I configure “columnizer” to not do this?
• If not, is there a better (and supported) way to make columns without it?
• I’d like to avoid using the “grid” layout offered by JQuery since my content has varying heights and grids would introduce a lot of whitespace.

Thanks for any ideas!

Answer 1

It turns out sortable DOES NOT require using <ul> and <li>. I ran sortable() on my container div, and set sortable’s item option to a common class between all my content divs.