Thanks so much! This was exactly what I needed. The only change I made was to the getDragElement function. I'm not sure why the author is appending to a fake iframe and didn't bother going back through all the posts to find out. If you change that line to document.body.appendChild(el) then it works fine (at least in FF3).
On Sep 18, 3:50 am, bazikch <[EMAIL PROTECTED]> wrote: > Hello, > > I faced the same problem and after googling I found a patch at the > following address:http://dev.rubyonrails.org/ticket/5771 > > Obviously it seems to work right only with the _ghosting_ options set > to _true_, otherwise the dragged element disappear but still activate > the droppable one. > > On 17 sep, 23:34, Anulith <[EMAIL PROTECTED]> wrote: > > > 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 -~----------~----~----~----~------~----~------~--~---
