> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/jquery-resizable-full-ok.md).

# 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>
```
