Hey All, I'm creating a small online traditional Shop, where tourists can buy African traditional goods. These include things like beads, Warrior spears clothing e.t.c My web application has pictures of african items draggables in an overflowed div and droppables pictures of visit locations where one.
Issue is when multiple droppables are put in overflowed div and scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls to position of droppable1 but on dropping on droppable3 the active drop area is for droppable1! Here is small sample code test 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="javascript/prototype.js" type="text/javascript"> <script src="javascript/scriptaculous.js" type="text/ javascript"> </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; float: right; } .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*/ } 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"> <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 }); for (var i = 1; i <= 4; i++) { Droppables.add('droppable_demo'+i, { accept: 'draggable', hoverclass: 'hover', onDrop: function(){ $('droppable_demo'+i).highlight(); } }); } // These changes have been made to dragdrop.js // Index: src/dragdrop.js // =================================================================== // --- src/dragdrop.js (revision 8189) // +++ src/dragdrop.js (working copy) // @@ -405,7 +405,7 @@ // if(this.options.ghosting) { // if (!this.element._originallyAbsolute) // Position.relativize(this.element); // - delete this.element._originallyAbsolute; // + this.element._originallyAbsolute = null; // Element.remove(this._clone); // this._clone = null; // } </script> </body> </html> Please advise! --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
