Continuando con nuestro estudio de jQuery, vamos a abordar los elementos redimensionables. Mediante el método resizable() se puede modificar el tamaño de cualquier elemento haciendo uso del ratón. Este método se puede usar conjuntamente con otros como “draggable” para dotar a un elemento la posibilidad de posicionarse y tomar cualquier tamaño. Cabe destacar que para usar esta funcionalidad de jQuery se va a requerir de un tema CSS de jQuery, esto es debido al uso de imágenes para mostrar iconos de redimensión. La forma de usar este método es muy simple: $('#nombreElemento').resizable(); En el siguiente código mostramos como podemos hacer para convertir una foto estática, en otra que podamos mover por la pantalla (draggable) y además cambiar su tamaño (resizable).
<html>
<head>
<link type="text/css" href="temaVerde.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#foto").resizable();
$("#foto").draggable();
});
</script>
<style>#foto { width: 150px; height: 100px; }</style>
</head>
<body>
<div id='foto' >
<img width="100%" height="100%" src="1.jpg" />
</div>
</body>
</html>