You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							46 lines
						
					
					
						
							1.3 KiB
						
					
					
				
			
		
		
	
	
							46 lines
						
					
					
						
							1.3 KiB
						
					
					
				<!doctype html>
 | 
						|
<html lang="en">
 | 
						|
<head>
 | 
						|
	<meta charset="utf-8">
 | 
						|
	<title>Compound Visual Test: Draggable and Resizable block element</title>
 | 
						|
	<link rel="stylesheet" href="../visual.css">
 | 
						|
	<link rel="stylesheet" href="../../../themes/base/all.css">
 | 
						|
	<style>
 | 
						|
	.draggable {
 | 
						|
		margin: 0.5em;
 | 
						|
		padding: 0.5em;
 | 
						|
	}
 | 
						|
	.absolute {
 | 
						|
		color: red;
 | 
						|
		position: absolute !important;
 | 
						|
	}
 | 
						|
	</style>
 | 
						|
	<script src="../../../external/requirejs/require.js"></script>
 | 
						|
	<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
 | 
						|
		data-composite="true">
 | 
						|
		$( ".draggable" )
 | 
						|
			.addClass( "ui-widget ui-widget-header ui-corner-all" )
 | 
						|
			.draggable({
 | 
						|
				revert: "invalid"
 | 
						|
			})
 | 
						|
			.resizable({
 | 
						|
				minHeight: 13,
 | 
						|
				handles: "s"
 | 
						|
			});
 | 
						|
		$( ".draggable:last" ).addClass( "absolute" );
 | 
						|
	</script>
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
 | 
						|
<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p>
 | 
						|
<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p>
 | 
						|
 | 
						|
<div id="first">
 | 
						|
	<div class="draggable">Draggable 1-1</div>
 | 
						|
	<div class="draggable">Draggable 1-2</div>
 | 
						|
	<div class="draggable">Draggable 1-3</div>
 | 
						|
</div>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 |