Tutorial #34 del curso de JQuery, en este tutorial veremos el método resizable() el cual nos permite cambiar el tamaño de los elementos en forma dinámica igual que en los sistemas operativos como windows.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery-UI - Resizable</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<style type="text/css">
#resizable{
width: 200px;
height: 200px;
background-color: #EBEBEB;
}
#contenedor{
width: 400px;
height: 400px;
border: solid 2px black;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="resizable" class="ui-widget-content">
<p>Cambiar tamaño</p>
</div>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#resizable').resizable({
animate: true,
containment: "#contenedor"
});
});
</script>
</body>
</html>