Dear Team, Humble apologies for spamming, but was using the framework to create an urgent job. forgive me! I have multiple droppables in an overflowed div, the draggable seem to only remember the offset position of the droppables. If i move the droppables in the overflowed div there's no correct drop registration.
Here's My sample code! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/..."> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <script src="scriptaculous/prototype.js" type="text/javascript"> </script> <script src="scriptaculous/scriptaculous.js" type="text/ javascript"> </script> </script> </head> <body> <style type="text/css"> div#droppable_container { margin-bottom: 30px; height: 300px; width: 500px; background: black; padding: 10px; } div#droppable_demo { width: 160px; height: 120px; font-size: 15px; background: #ffffff; border: 5px solid #ccc; text-align: center; } .droppable_demo { width: 100px; height: 100px; font-size: 15px; background: #ffffff; border: 5px solid #ccc; text-align: center; float: left; margin: 5px; } #draggable_demo { background: yellowgreen; margin: 5px; border: 3px solid green; width: 100px; height: 100px; cursor: move; font-size: 15px; float: left; } .spaceHolder { background: orange; margin: 5px; border: 3px solid orangered; width: 100px; height: 100px; font-size: 15px; float: left; } div#droppable_demo.hover { border: 5px dashed orange; background: #efefef; } .droppable_demo.hover { border: 5px dashed orange; background: #efefef; } #dragContainer { background: yellow; border: 5px solid blue; float: left; width: 60%; height: 120px; overflow: auto; /*This is where the weirdness happens*/ } #dropContainer { background: blue; border: 5px solid red; float: left; width: 60%; height: 120px; overflow: auto; /*This is where the weirdness happens*/ } #setter { background: blue; border: 5px solid red; width: 100px; height: 100px; position: absolute; } h3 { color: black; float: left; } </style> <div id="droppable_container"> <div id="dragContainer"> <div class="draggable" id="draggable_demo"> DRAG ME!!! </div> <!-- space holders added to create overflow --> <div class="spaceHolder"> Space Holder </div> <div class="spaceHolder"> Space Holder </div> <div class="spaceHolder"> Space Holder </div> </div> <div id="dropContainer" onScroll="add();"> <div id="container" style="top: 0px;"> <div class="droppable_demo" id="droppable_demo1"> Drop here1! </div> <!-- space holders added to create overflow --> <div class="droppable_demo" id="droppable_demo2"> Drop here2! </div> <div class="droppable_demo" id="droppable_demo3"> Drop here3! </div> <div class="droppable_demo" id="droppable_demo4"> Drop here4! </div> </div> </div> <h3>Draggables in yellow container with blue border, droppables in blue containter with red border. Drag green box to Drop here 1, it will change bourder on hover. Then scroll the droppables in blue until you can see half-botttom of Drop here 1 & Drop here 2 and the last two Drop here 3 & 4.</h3> <script type="text/javascript"> new Draggable('draggable_demo', { revert: true, ghosting: true // this is needed to avoid the craziness of the overflowed div's scroll bars }); Droppables.add('dropContainer', { accept: 'draggable', onHover: function(){ if (!activate) { makeDroppable(); activate = true; testerbox.value = activate; } } }); makeDroppable(); function makeDroppable(){ for (var i = 1; i <= 4; i++) { Droppables.add('droppable_demo' + i, { accept: 'draggable', hoverclass: 'hover', onDrop: function(){ $('droppable_demo' + i).highlight(); } }); } } </script> </body> </html> Isaac Khaguli JAVA Maasai, Africa, Kenya --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
