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