# jQuery Resizable full (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSRxzK8LW8s1gwc5rad%2F-MSRy79kDriAB9ljO941%2FScreenshot_2.jpg?alt=media\&token=02caf2aa-2410-442a-93b0-227c3aa6cfaa)

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

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSRxzK8LW8s1gwc5rad%2F-MSS-4hIBVUmwmtoNEXF%2FScreenshot_3.jpg?alt=media\&token=569ad17d-b0d9-494a-a453-f7724aeb0b74)

```
<!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;

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSRxzK8LW8s1gwc5rad%2F-MSS07A0tAk0XprdQcrC%2FScreenshot_4.jpg?alt=media\&token=f9d92fe1-6839-4167-b4d5-8d767af9e22b)

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

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSS0FZkrvucxPPfZvqT%2F-MSS1D78eHKmQet3BDYZ%2FScreenshot_4.jpg?alt=media\&token=1a1ae8d7-b4d3-43c8-99a9-8b4d0f63720e)

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;

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSS1E_4G7cvvmaD13Or%2F-MSS2Kl8plnoWjZDVroy%2FScreenshot_6.jpg?alt=media\&token=aff04be9-2a06-4a32-8643-1a341653074c)

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

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSS2NmmunOhDxA4drLa%2F-MSS3-3NwRMYK2jgAHGt%2FScreenshot_7.jpg?alt=media\&token=61ffcb39-71fd-4e35-95ec-11eef59a26e7)

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

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSS33O4B5wG14TurBSP%2F-MSS8FTo2viTTvPW25Je%2FScreenshot_9.jpg?alt=media\&token=50a705c6-2f1d-4719-8603-6907ff74c5e7)

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



