scriptaculous: two drop targets, right pane is sortable

Hello. Currently, I have the following javascript.

[code]
187 function setDraggables(e) {
188 var dragObjs = e.getElementsByTagName(‘li’);
189
190 for(var x=0; x<dragObjs.length; x++) {
191 if(dragObjs[x].id)
192 new Draggable(dragObjs[x].id, {revert: true });
193 }
194 dropAdd(‘current’);
195 dropAdd(‘available’);
196 }
197 function moveItem(draggable,droparea) {
198 Droppables.remove(‘current’);
199 if (!droparea.cleared) {
200 droparea.cleared = true;
201 }
202 draggable.parentNode.removeChild(draggable);
203 droparea.appendChild(draggable);
204 dropAdd(‘current’);
205 Sortable.create(‘current’, {dropOnEmpty:true});
206 }
207 function dropAdd(id) {
208 Droppables.add(id, {
209 hoverclass: ‘hoverActive’,
210 onDrop: moveItem });
211 $(id).cleared = false;
212 }
[/code]

and the following html. please ignore the crude ID structure. This is a POC in development.

[code]
7 <div id=”draggables”>
8 <div class=”column left”>
9 <h3>Available groups:</h3>
10 <ul id=”available”>
11 <li id=”a1″>group1</li>
12 <li id=”a2″>group2</li>
13 <li id=”a3″>group3</li>
14 <li id=”a4″>group4</li>
15 <li id=”a5″>group5</li>
16 </ul>
17 </div>
18 <div class=”column right”>
19 <h3>Your current view:</h3>
20 <ul id=”current”>
21 <li id=”v1″>curgroup1</li>
22 <li id=”v2″>curgroup2</li>
23 <li id=”v3″>curgroup3</li>
24 <li id=”v4″>curgroup4</li>
25 <li id=”v5″>curgroup5</li>
26 </ul>
27 </div>
28 </div>
[/code]

I’d like to be able to drag items from column A to B and vice versa. Column B, however, should also be sortable.

It KINDA works. What’s not working right now is, you can drag things from left to right, but then if you sort items in column B, you suddenly can’t drag things from Column A to Column B any more.

My understanding is that the line

[code]
Sortable.create(‘current’, {dropOnEmpty:true});
[/code]

will implicity also call Sortable.destroy if the element has already been declared a “Sortable.” — but i haven’t found this to always be the behavior. If I explicity add:

[code]
Sortable.destroy(‘current’);
[/code]

at the TOP of my “moveItem” function, everything works as desired, but for some reason, re-ordering items on the right is very wonky. Some times the element won’t “catch” in its new position and drop to the bottom. Moving things from up to down works fine, but moving things from down to up seems to be problematic (FF3 – I haven’t tested in IE).

dropOnEmpty:true seems to fix this, but seems to lose its “fixing” effect when Sortable.destroy is used.

Anyone accomplished something similar?

Thanks,
dep

Also in #JavaScript _↴