sortable() with weird DOM

Here's an example markup, which looks like a regular table if you add in some
css:
<div class="headers">
    <div class="headeritem">id</div>
    <div class="headeritem">name</div>
    <div class="headeritem">address</div>
    <div class="headeritem">phone</div>
</div>
<div class="scroller"> 
    <div class="grid">
        <div class="row" style="top:0px">
            <div class="col c0">1</div>
            <div class="col c1">John Smith</div>
            <div class="col c2">123 Oak Street</div>
            <div class="col c3">555-123-4567</div>
        </div>
        
    </div>
</div>
I can easily do a $('.header').sortable() and drag a header around with a
placeholder in its spot. When I begin to drag "name," a placeholder class
designed to look like an empty space takes its place
(forcePlaceholderSize=true). If I drag "name" slightly farther to the right,
"address" shifts, and the placeholder moves there.
So far so good. The rest I havent tried yet -slash- dont know how.
For this case of dragging "name," I'd also like $('.c1'), corresponding to
the columns with names in them, to act like placeholders. My plan is to:
1) on "start:", give all ".c1"s the placeholder class, so now the entire
column looks 'blank'
2) helper returns a clone with a small number of entries from the "name"
column copied into it.
3) So now I'm holding onto the "name" header with "John Smith" and 4 other
results below it in a little window, and the entire column looks like a
placeholder. When I drag to the right, over "address," the headers will
re-order, since they were declared sortable, but how do I make the <div
class="grid"> columns mimic this motion? I want this to occur whether the
mouse is over my <div class="headers"> or <div class="grid">
--
View this message in context: http://www.nabble.com/sortable%28%29-with-weird-DOM-tp24457357s27240p24457357.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.