The patch to which you are linking works fine in FF3, but in IE as
soon as I try to drag something I get an error stating that 'style' is
not defined.  If you could please provide the code you tacked on to
the end of your dragdrop.js file I would really appreciate it.

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 youdrag
> > 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 whenoverflow
> > 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 theoverflow: auto line then everything works as I want it to.
>
> > --Begin Code
>
> > <html>
> >         <head>
> >                 <title>Scriptaculousdraganddropoverflowtest</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
-~----------~----~----~----~------~----~------~--~---

Reply via email to