Drag/Resize/Minimize/Maximize/Close Any Elements – interactiveJS

Preview:

Description:

The interactiveJS JavaScript library helps you create draggable, resizable, dockable windows from any HTML elements.

The library allows your user to drag, resize, minimize, maximize and close your HTML elements. You can choose which of the previous interactions are allowed.

How to use it:

Add the interactiveJS’ JavaScript and CSS files to your project.

<link href="/path/to/interactive.min.css" rel="stylesheet" />
<script src="/path/to/interactive.min.js"></script>

Initialize the library on the target element and pass the following parameters as per your needs:

• Element: The id of the element we want to make interactive.
• Options: Object containing properties that allow you to customize your interactive elements. See below.

interactive(Element, Options);

All default options.

• drag: If set to False the element won’t be a draggable element, meaning the user won’t be able to drag the element. Default: true.
• resize: If set to False the element won’t be a resizable element, meaning the user won’t be able to resize the element. Default: true.
• close: If set to False the won’t be able to close the element. Default: true.
• minMax: True If set to False the won’t be able to minimize and maximize the element. Default: true.
• minMaxIcons: If set to False the element won’t have minimize and maximize buttons. Default: true.
• minDoubleClick: If set to False the user won’t be able to minimize an element by double clicking the element or the drag point for draggable elements. Default: true.
• minZone: This is the place where the minimized elements will live. Default: document.body.

If you don’t need the full functionality of the library, you can load just the function you need by using the individuals.

<link href="/path/to/minMaxClose.min.css" rel="stylesheet" />
<script src="/path/to/iminMaxClose.min.js"></script>

minMaxClose(Element, Options);

<script src="/path/to/individuals/draggable.min.j"></script>

draggable(Element);

<link href="/path/to/resizable.min.css" rel="stylesheet" />
<script src="/path/to/resizable.min.js"></script>

resizable(Element);