jQuery - Interacción redimensionable

Descripción

los Resize ableLa función se puede usar con interacciones en JqueryUI. Esta función se puede habilitar para cambiar el tamaño de la función en cualquier elemento DOM. Con el cursor, agarre el borde derecho o inferior y arrastre hasta el ancho o alto deseado.

Sintaxis

Aquí está la sintaxis simple para usar arrastrable:

$( "#resizable" ).resizable();

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de Resize-able -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link 
         href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
      </script>
		
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
			
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
			
         #resizable-14{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
		
      <!-- Javascript -->
		
      <script>
         $(function() {
			
            $( "#resizable-14" ).resizable({
				
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },

               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
				
         });
      </script>
   </head>
	
   <body>
	
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
		
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-actions.htm

↰ Previous page