connecting sortable() across 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"> <!--this just acts as an overflow:hidden container for its child-->
<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>
<!--more rows here-->
</div>
</div>
I can easily do a $('.headers').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">. It should look like whole columns at once are sortable.
Am I on the right track, and if so, how do I go about #3?