The jQuery-resizable.js is resize the simple box element jQuery plugin that has no direct UI characteristics. It performs its functioning with mouse and touch functions for resizing and contrarily depends upon the CSS and HTML to manage the optical features of the resizing processes. Eventually, final outcomes are a much tiny element that’s lucidly reusable and this component offers an option to the user to adjust the box dimensions according to the requirement and need.
Table of Contents
How to use it:
To get started, you need to load the jQuery resizable plugin :
<script src="jquery-1.11.3.min.js"></script>
<script src="src/jquery-resizable.js"></script>
Call the function on target DOM element to make it resizable :
$(".rebox").resizable();
Other All Customize the plugin with the following options :
$(".rebox").resizable({
// selector for handle that starts dragging
handleSelector: null,
// resize the width
resizeWidth: true,
// resize the height
resizeHeight: true,
// the side that the width resizing is relative to
resizeWidthFrom: 'right',
// the side that the height resizing is relative to
resizeHeightFrom: 'bottom',
// disable touch-action on $handle
// prevents browser level actions like forward back gestures
touchActionNone: true,
// instance id
instanceId: null
});
Callback functions :
$(".rebox").resizable({
onDragStart: function (e, $rebox, opt) {
$rebox.css("cursor", "nwse-resize");
},
onDragEnd: function (e, $rebox, opt) {
$rebox.css("cursor", "");
}
onDrag: function (e, $rebox, newWidth, newHeight, opt) {
// limit box size
if (newWidth > 300)
newWidth = 300;
if (newHeight > 200)
newHeight = 200;
$rebox.width(newWidth);
$rebox.height(newHeight);
// explicitly return **false** if you don't want
// auto-height computation to occur
return false;
});
});
It also provides a method to resize table columns via drag and drop :
<script src="src/jquery-resizableTableColumns.min.js"></script>
.resizer {
position: absolute;
top: 0;
right: -8px;
bottom: 0;
left: auto;
width: 16px;
cursor: col-resize;
}
