# jQuery Resizable full (ok)

![](/files/-MSRy79kDriAB9ljO941)

#### Bài toán 1: Làm 1 resizable đơn giản

![](/files/-MSS-4hIBVUmwmtoNEXF)

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable();
    });
  </script>
  <style type="text/css">
    #resize {
      width: 300px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

**Bài toán 2: Sử dụng hiệu ứng**&#x20;

![](/files/-MSS07A0tAk0XprdQcrC)

```
animate: true,
ghost: true
```

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        animate: true,
        ghost: true
      });
    });
  </script>
  <style type="text/css">
    #resize {
      width: 200px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

**Bài toán 3: Giới hạn khung kéo**

![](/files/-MSS1D78eHKmQet3BDYZ)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        containment: "#wrapper"
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

***Bài toán*****&#x20;4*****: maxHeight, maxWidth, minHeight, and minWidth giới hạn khung***&#x20;

![](/files/-MSS2Kl8plnoWjZDVroy)

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        maxWidth: 150,
        maxHeight: 30
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

#### Bài toán 5: aspectRatio tỉ lệ thay đổi khung hình

![](/files/-MSS3-3NwRMYK2jgAHGt)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        aspectRatio: 2 / 1
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

#### Bài toán 6: Qui định số px tối thiểu mỗi lần kéo thay đổi

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        grid: 100
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

#### Bài toán 7: alsoResize Một đối tượng  khác sẽ đồng bộ theo

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <div id="mirror">Lorem, ipsum dolor sit amet.</div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        alsoResize: "#mirror"
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #mirror {
      border: 1px solid blue;
      width: 200px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```

#### Bài toán 8: sự kiện start, resize, stop

![](/files/-MSS8FTo2viTTvPW25Je)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <div id="resize">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Fuga</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#resize').resizable({
        start: function( event, ui ) {
          console.log('start');
        },
        resize: function( event, ui ) {
          console.log('resize');
        },
        stop: function( event, ui ) {
          console.log('stop');
        }
      });
    });
  </script>
  <style type="text/css">
    #wrapper {
      width: 400px;
      height: 50px;
      margin: 0 auto;
      border: 1px solid red;
      padding: 10px;
    }
    #resize {
      width: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/jquery-resizable-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
