Ticket #3919: resizable.html

File resizable.html, 1.8 KB (added by gabrielle27, January 23, 2009 05:34PM UTC)

demo page

<html>
<head>		
	
	<link rel="stylesheet" href="http://ui.jquery.com/applications/themes/base/ui.all.css" />					

	<script type="text/javascript" src="http://ui.jquery.com/applications/jquery-1.3.js"></script>
	<script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.core.js"></script>	
	<script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.draggable.js"></script>	
	<script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.droppable.js"></script>	
	<script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.resizable.js"></script>	

<script type="text/javascript">	
		$(document).ready( function() {

			$("#drop_area").droppable({
				accept:"div",
			    drop: function(ev, ui) { 			
					var elem = $(document.createElement("div")).css( { 
						'width':'200',
						'height':'200',
						'background-color':'yellow'
					}).append("knobs don't work").appendTo( "#drop_area" ).resizable({
						knobHandles : true
					});				
				}
			});
			$("#drag_div").draggable({
				cursor : 'move',
				helper : 'clone'
			});
            $("#knobs_work").resizable({
				knobHandles : true
			});			

		});
			

</script>
	
</head>
<body>
	Drag the green div onto the red div.  A resizable yellow div will be created and appended to the red div.  It should have knobHandles, but it doesn't.  If you comment out line:28 of this file ( the "cursor:move" option on the green div ), then the yellow div will have knobHandles.
	<div id="drag_div" style="background-color:green;width:200;height:200;">Drag me onto the red area below</div>			

	<div id="drop_area" style="width:100%;height:800px;background-color:red;">
	    <div id="knobs_work" style="background-color:blue;width:200;height:200;">Knobs work</div>
	</div>
	
</body>
</html>

Download in other formats:

Original Format