draggable + droppable problem when overflow:auto; desperate! pls
Heya folks!
{alert}newbie to jQuery!{/alert}
=)
I've got the structure below that works fine when not using
overflow:auto;
however, as my listing space is pretty small, and there are several
items to be listed, I therefore need some sort of scroll.
Any ideas on what Am I doing wrong ?
Best
my code with overflow: http://gordo.sqweebs.com/dummy04.html
without overflow: http://gordo.sqweebs.com/dummy05.html
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="jquery/themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></
script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.sortable.js"></
script>
<script type="text/javascript" src="jquery/ui/ui.draggable.js"></
script>
<script type="text/javascript" src="jquery/ui/ui.droppable.js"></
script>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#lb-outerframe {
border: 2px #E9E9E9 solid;
position:absolute;
top: 10px;
left: 15%;
width: 920px;
height: 560px;
}
/* ======================================================== */
/* ==[ content ]========================================== */
/* ======================================================== */
#lb-content {
position: absolute;
top: 65px;
left: 183px;
right: +1px;
height: 404px;
z-index: 1;
}
lb-workspace {
z-index: 1;
}
#lb-box {
position: absolute;
top: 1px;
left: 1px;
width: 535px;
height: 400px;
border: 1px solid #000000;
z-index: 1;
}
.lb-assets-header {
position: absolute;
top: 2px;
left: 540px;
right: 0px;
height: 24px;
z-index: 1;
}
.lb-assets-list {
position: absolute;
top: 28px;
left: 540px;
bottom: +5px;
right: 0px;
z-index: 1;
overflow:auto; /* remove overflow and it works */
}
.lb-assets-header .lb-assets-header-content { color: #336699; font-
size:12px; }
.lb-assets-list .lb-asset-draggable { width:80px; }
.lb-assets-list .lb-asset-border { margin: 4px 4px 4px 4px; }
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#lb-content").disableSelection();
$(".lb-asset-draggable").draggable({
containment: "document",
cursor: "pointer",
opacity: 0.35,
revert: "invalid",
helper: "original"
});
$("#lb-box").droppable({
accept: ".lb-asset-draggable",
tolerance: "fit"
});
});
</script>
</head>
<body>
<div id="lb-outerframe">
<!-- start content -->
<div id="lb-content">
<div id="lb-workspace">
<div id="lb-box">box</div>
<div class="lb-assets-header"><span class="lb-assets-header-
content">drag images to the box</span></div>
<div class="lb-assets-list">
<span class="lb-asset-border"><img src="images/px_blue.gif"
id="lb-asset01" title="01" class="lb-asset-draggable" /></span>
<span class="lb-asset-border"><img src="images/px_black.gif"
id="lb-asset02" title="02" class="lb-asset-draggable" /></span>
<span class="lb-asset-border"><img src="images/
px_green.gif" id="lb-asset03" title="03" class="lb-asset-draggable" /