// Reproduces Script.aculo.us bug in ie7- in which a draggable is placed within a div with overflow set to scroll or auto
<!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="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/scriptaculous.js" type="text/javascript"></script> </head> <body> <style type="text/css"> div#droppable_container{ margin-bottom: 30px; height:240px; 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; } #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; } #dragContainer { background: yellow; border:5px solid black; float: left; width: 60%; height: 120px; overflow: auto; /*This is where the weirdness happens*/ } h3 { color: white; 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="droppable_demo"> Drop here! </div> <h3>To reproduce this bug, in ie7 or lower scroll the yellow div#droppable_container</h3> </div> <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('droppable_demo', { accept: 'draggable', hoverclass: 'hover', onDrop: function() { $('droppable_demo').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>
