Navigation

jQuery Resizable full (ok)

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

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

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

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 4: maxHeight, maxWidth, minHeight, and minWidth giới hạn khung 

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

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

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>

PreviousjQuery drop full (ok)NextTablesorter full (ok)

Last updated

Navigation

Lionel

@Copyright 2023