jQuery - Interaction redimensionnable

La description

le Resize ableLa fonction peut être utilisée avec des interactions dans JqueryUI. Cette fonction peut être activée Fonctionnalité de redimensionnement sur n'importe quel élément DOM. Avec le curseur, saisissez la bordure droite ou inférieure et faites-la glisser à la largeur ou à la hauteur désirée.

Syntaxe

Voici la syntaxe simple pour utiliser le glisser-déposer -

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

Exemple

Voici un exemple simple montrant l'utilisation 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>

Cela produira le résultat suivant -

jquery-interactions.htm