Hello. Currently, I have the following javascript.
and the following html. please ignore the crude ID structure. This is a POC in development.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 }
I'd like to be able to drag items from column A to B and vice versa. Column B, however, should also be sortable.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>
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
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.create('current', {dropOnEmpty:true});
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).Code:Sortable.destroy('current');
dropOnEmpty:true seems to fix this, but seems to lose its "fixing" effect when Sortable.destroy is used.
Anyone accomplished something similar?
Thanks,
dep


Reply With Quote

Bookmarks