Press "Enter" to skip to content

Draggable & Resizable Drag-And-Drop Focus Box In jQuery | stageItem.js

stageItem.js is a small jQuery & jQuery UI plugin that helps you create draggable and resizable focus boxes as you saw in Wix.com, drag and drop site builder.

jquery drag and drop multiple div example, jquery drag and drop example, jquery drag and drop library, jquery drag and drop in specific area, jquery drag and drop list

How to make use of it:

1. Load the required jQuery and jQuery UI within the HTML web 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 main focus field and executed it.

<div class="box">
  Drag & Resize Me
</div>
$(function(){
  $(".box").stageItem();
});

4. Determine which container the main focus field is connected to.

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

5. Customize the color of the main focus field & resize handles.

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

6. Determine whether or not so as to add a nesting stage attribute to the main focus field.

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

7. Callback features.

$(".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
  },
});

Draggable & Resizable Focus Box Plugin/Github, jquery drag and drop form builder, drag and drop div using jquery, drag and drop cards jquery


See Demo And Download

Official Website(jqueryscript): Click Here

This superior jQuery/javascript plugin is developed by jqueryscript. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *