Draggable & Resizable Focus Box In jQuery - stageItem.js

stageItem.js is a tiny jQuery & jQuery UI plugin that helps you create draggable and resizable focus boxes as you've seen in Wix.com drag and drop website builder.

How to use it:

1. Load the necessary jQuery and jQuery UI in the HTML page.

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download and load the stageItem.js jQuery plugin.

<script src="stageItem.js"></script>

3. Attach the plugin to the focus box and done.

<div class="box">
  Drag & Resize Me
</div>

$(function(){
  $(".box").stageItem();
});

4. Determine which container the focus box is attached to. Default: 'body'.

$(".box").stageItem({
  indicationsContainer: '#container'
});

5. Customize the color of the focus box & resize handles. Default: '#459fed'.

$(".box").stageItem({
  mainColor: '#222'
});

6. Determine whether to add a nesting level attribute to the focus box. Default: true.

$(".box").stageItem({
  nestingHierarchy: false
});

7. Callback functions.

$(".box").stageItem({
  onResizeStart:(e, ui) => {
    // do something
  },
  onResize:(e, ui) => {
    // do something
  },
  onResizeStop:((e, ui) => {
    // do something
  },
  onDragStart:(e, ui) => {
    //  do something
  },
  onDrag:(e, ui) => {
    //  do something
  },
  onDragStop:(e, ui) => {
    //  do something
  },
});

---

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