Hello all, I am trying to create a web app that will let you drag items from a left pane to a right pane. These panes must have overflow: auto on because there will definitely be more data in them than can fit in the provided space. The problem is that when overflow is set to auto, the div expands when the draggable object reaches the extents instead of the object existing outside that div while being dragged. See attached code for an example of what I mean. If you remove the overflow: auto line then everything works as I want it to.
--Begin Code <html> <head> <title>Scriptaculous drag and drop overflow test</title> <style> div.container { width: 95%; background-color: #CCC; margin-left: 10px; height: 300px; } div.frame { width: 98%; overflow: auto; background-color: #FFF; margin: 0px auto; } div.object { width: 100px; height: 100px; margin-left: 10px; margin-bottom: 5px; } div.blue { background-color: #00F; } div.red { background-color: #F00; } </style> <script src="prototype.js" type="text/javascript"></script> <script src="scriptaculous.js" type="text/javascript"></script> <script> function Move(drag, drop, e) { alert("dropped " + drag.id + " on " + drop.id); } function Setup() { Droppables.add(document.getElementById("container1"), {onDrop: Move, containment: false}); Droppables.add(document.getElementById("container2"), {onDrop: Move, containment: false}); new Draggable(document.getElementById("object_1"), {revert: true}); new Draggable(document.getElementById("object_2"), {revert: true}); } </script> </head> <body onload="Setup();"> <div style="width: 50%; float: right; border-left:2px solid black;"> <div class="frame"> <div id='container2' class="container"></div> </div> </div> <div style="width: 50%;"> <div class="frame"> <div id='container1' class="container"> <div id="object_1" class="object red"> </div> <div id="object_2" class="object blue"> </div> </div> </div> </div> </body> </html> --End Code --~--~---------~--~----~------------~-------~--~----~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---