set-resizable
Version:
A small JS library to convert any HTML element into a resizable element.
69 lines (51 loc) • 1.85 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable</title>
</head>
<body>
<h1>Examples</h1>
<p>Click element to enable resize:</p>
<h2>Image</h2>
<img id="image1" class="set-resizable" src="img/64743063.jpg" width="300" height="200">
<img id="image2" class="set-resizable" src="img/23534627.jpg" width="200" height="150">
<h2>Div</h2>
<div id="text" class="set-resizable" style="width: 300px; background-color: #ccc; padding:20px;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat adipisci veniam rem accusamus, dolores
dolorem soluta error voluptas modi cum aliquam earum quibusdam quia in libero delectus ratione, incidunt
ipsam.</p>
</div>
<h2>Table</h2>
<table id="table" class="set-resizable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<script src="../dist/set-resizable.min.js"></script>
<script>
document.querySelectorAll(".set-resizable").forEach(function (item) {
var resizable = new Resizable(item);
resizable.onresize = function (data) {
console.log("onresize", data);
}
resizable.onactivate = function (data) {
console.log("onactivate", data);
}
});
</script>
</body>
</html>