scriptaculous: two drop targets, right pane is sortable

[dep]

Hello. Currently, I have the following javascript.

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 }

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

  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>

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

Sortable.create('current', {dropOnEmpty:true});

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:

Sortable.destroy('current');

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

[dep]

As a follow-up, using the .hoverActive class makes it easier to know when you can "drop" an item and have it place correctly. However, this is sometimes a little weird. You have to be fairly precise. Is there a parameter to make this easier? Like assigning "snap" to a Sortable? i can only seem to assign snap to draggables.

Thanks,
dep

[dep]

I was able to resolve this using the ghosting parameters and the hover class stuff.

Thanks anyway.

[astupidname]

Proof there's nothing at all wrong with talking to yourself, sometimes it helps!!!

[dep]

Proof there's nothing at all wrong with talking to yourself, sometimes it helps!!!

haha -- indeed. thank you. this forum is valuable, if even for inner monologue. Perhaps someone will stumble upon it and find something of value.