can't drag out of an accordion :-(
OK, attached is as small of an example as I can make. I need to have 'tools' in an accordion and be able to drag them out to a 'sortable'.
Everything works fine, unless the draggables are in the accordion. Then, they seem to be confined to it. Setting scroll: false and container: window doesn't seem to help, or do what I expect.
This is a show stopper for me. Both the accordion and drag/drop are required.
Thoughts?
<html>
<head>
<title></title>
<link type="text/css" href="../style/jquery/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../script/jquery/jquery.js"></script>
<script type="text/javascript" src="../script/jquery/jquery.ui.all.js"></script>
<script type="text/javascript">
$(function() {
$("#acc_toolbox").accordion({fillSpace: true, autoHeight: true, animated: false});
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
$(".tool").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
scroll: false,
containment: 'document',
opacity: 0.7,
refreshPositions: true
})
});
</script>
<style type="text/css">
#sortable {list-style-type: none;width: 100%;}
#sortable li {margin: 5px 5px 5px 5px;padding: 5px;font-size: 1.2em;cursor: pointer;}
.tool {border: solid 1px #CCCCCC;background-color: #EEEEEE;cursor: pointer;width: 150px;font-size: .8em;margin: 0px 0px 5px 0px;}
.te_container {background: #FFFFFF;width: 100%;height: 100%;padding: 0px 0px 0px 0px;}
.te_container_left {float: left;width: 40%;}
.te_container_right {float: left;width: 58%;}
.te_container_footer {clear: both;}
.step {width: 100%;}
</style>
</head>
<body>
<div class="te_container">
<div class="te_container_left">
<div style="height: 80%;">
<div id="acc_toolbox" style="width: 100%; height: 100%; overflow: hidden;">
<h3>
<a>Section 1</a></h3>
<div>
<p class="tool">
thingy #1</p>
<p class="tool">
thingy #2</p>
</div>
<h3>
<a>Section 2</a></h3>
<div>
<p class="tool">
thingy #3</p>
<p class="tool">
thingy #4</p>
</div>
</div>
</div>
</div>
<div class="te_container_right">
<ul id="sortable">
<li class="ui-state-default step">
<div style="text-align: left;">
<h5>
Step 1</h5>
</div>
</li>
<li class="ui-state-default step">
<div style="text-align: left;">
<h5>
Step 2</h5>
</div>
</li>
<li class="ui-state-default step">
<div style="text-align: left;">
<h5>
Step 3</h5>
</div>
</li>
</ul>
</div>
<div class="te_container_footer">
<!--The footer has to be here so some element can contain the 'clear:both;' style.-->
</div>
</div>
</body>
</html>