jQuery Plugin To Create Resizable Elements - resizeablex

resizeablex is a jQuery plugin that helps you create draggable and resizable DOM elements just like the Photoshop's resize tool.

How to use it:

1. Load the required stylesheet to style the resizable area & corner anchor points.

<link rel="stylesheet" href="jquery-resizeablex.css">

2. Create a resizable element.

<div class="resizable-element" id="demo">
    <div class="content"></div>
</div>

3. Style the resizable element and its inner content.

.resizable-element {
  width: 200px;
  height: 150px;
  left: 30%;
  top: 10%;
  z-index: 3;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%
}

4. Load jQuery library and the resizeablex plugin at the end of the document.

<script src="jquery.min.js" ></script>
<script src="jquery-resizeablex.js" ></script>

5. Call the plugin to make the element resizable by dragging & dropping the corner anchor points.

$('#testelement').resizeablex();

---

This awesome jQuery plugin is developed by xiilei. For more Advanced Usages, please check the demo page or visit the official website.