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
-~----------~----~----~----~------~----~------~--~---
