Ticket #3164: Sortables_NestedError_r4.html
File Sortables_NestedError_r4.html, 3.8 KB (added by mlang74, September 13, 2008 03:30AM UTC)

Workaround solution

<html>
	<head>
		<style>
body{
    background-color:#EEEEEE;
    margin:0px; padding:0px;
}
div{
    margin:0px; padding:0px;
}
.contentArea {
	position: relative;
	float:left;
	margin:0px; padding:0px;
	border: 1px dashed #336699;
	background-color: #99CCFF;
	overflow:visible;
}
.content {
	position:absolute;
	float:left;
	overflow:auto;
}
.contentGroup{
	position: absolute;
	float:left;
	margin:0px; padding:0px;
	border: 1px solid #336699;
	background-color: transparent;
	overflow:visible;
}
.contentGroup_hover{
	background-color: red;
}
.moveButton
{
	cursor:move;
	background-color: #3399CC;
	position:absolute;
	width:16; height:16;
	margin:0px; padding:0px;
}
		</style>
  <script type="text/javascript" src="jquery-1.2.6.js"></script>
  <script type="text/javascript" src="jquery.ui.all.js"></script>
  <script type="text/javascript" >
  	function draggableResize(e, ui){
	  	var parent = ui.element.parent().get(0);
	  	ui.element.css("width", (ui.element.width() / $(parent).width() * 100) + "%");
	  	
	  	ui.element.children('.contentGroup,.content').each(function(){
	  		$(this).width("99%");
	  		$(this).height(ui.size.height-25);
	  	});
  	}
	function sortComplete(e, ui){
		//this is part of a fix required for jQuery UI 1.5.2 - see below
		$('.contentArea').resizable({ autoHide: true, resize:draggableResize});
	}
  	$(document).ready(function(){
  		//resize and sorting are not compatible
			$('.contentArea').resizable({ autoHide: true, resize:draggableResize});
			$('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:['.contentGroup'], opacity:'.5', stop:sortComplete});
			
			//the following handlers are required because resizable elements cannot be part of a sortable group. (jQuery UI 1.5.2)
			//	resizing works without this, but the sortables do not work when contained elements are resizable
			$('.moveButton').bind("mouseenter", function(e){
				$('.contentArea').resizable("destroy");
			});
			$('.moveButton').bind("mouseout", function(e){
				$('.contentArea').resizable({ autoHide: true, resize:draggableResize});
			});
  	});
  </script>
	</head>
	<body>
		<div class="contentGroup" id="GRP_0" style="width:100%">			
			
			<div id="CA_4" class="contentArea" style="width:99%;height:200;">
				<div id="CA_4_M" class="moveButton" style="width:16;"></div>
				<div id="GRP_4" class="contentGroup" style="left:0;top:16;width:99%;height:180">
					<div id="CA_5" class="contentArea" style="width:80%;height:100;">
						<div id="CA_5_M" class="moveButton" style="width:16;"></div>
						<div id="CA_5_C" class="content" style="left:0;top:16;width:99%;height:80">
							Header Content Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
						</div>
					</div>
				</div>
			</div> 
			
			<div id="CA_2" class="contentArea" style="width:20%;height:400;">
				<div id="CA_2_M" class="moveButton" style="width:16;"></div>
				<div id="GRP_2" class="contentGroup" style="left:0;top:16;width:99%;height:380">
					<div id="CA_1" class="contentArea" style="width:98%;height:100;">
						<div id="CA_1_M" class="moveButton" style="width:16;"></div>
						<div id="CA_1_C" class="content" style="left:0;top:16;width:99%;height:80">
				    This is the side bar content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
						</div>
					</div>
				</div>
			</div> 
			
			<div id="CA_3" class="contentArea" style="width:79%;height:400;">
				<div id="CA_3_M" class="moveButton" style="width:16;"></div>
				<div id="CA_3_C" class="content" style="left:0;top:16;width:99%;height:380">
					This is the main body content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
				</div>
			</div>
		</div>
</body>
</html>

Download in other formats:

Original Format