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 3 years ago

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

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

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

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

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

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

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

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