INTERACTIVE JS

interactiveJS@hotmail.com

This JavaScript library allows you to convert HTML elements into interactive elements. Giving your users the freedom to drag, resize, minimize, maximize and close elements.

Interactive

Allows your user to drag, resize, minimize, maximize and close your html elements. You can choose which of the previous interactions are allowed.

ADD INTERACTIVE.JS TO YOUR PROJECT:

CSS

< link href="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/css/interactive.min.css" rel="stylesheet"/>

JS

< script src="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/interactive.min.js">< /script>

USAGE:

interactive({String} Element Id, {Object} options);

Element id: The id of the element we want to make interactive.

Options: Object containing properties that allow you to customize your interactive elements.

Name	Type	Default	Description
drag	Boolean	True	If set to False the element won't be a draggable element, meaning the user won't be able to drag the element.
resize	Boolean	True	If set to False the element won't be a resizable element, meaning the user won't be able to resize the element.
close	Boolean	True	If set to False the won't be able to close the element.
minMax	Boolean	True	If set to False the won't be able to minimize and maximize the element.
minMaxIcons	Boolean	True	If set to False the element won't have minimize and maximize buttons.
minDoubleClick	Boolean	True	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.
minZone	HTML Element	document.body	This is the place where the minimized elements will live.

DEMO:

See the Pen Interactive Demo by interactiveJS (@interactiveJS) on CodePen.

If you don't need the full functionality of the library, you can load just the function you need by using the individuals, check the sections: resizable, draggable and min - max -close for more details.

Minimize - Maximize - Close

Allows you user to minimize, maximize and close your html elements.

ADD MINIMIZE - MAXIMIZE - CLOSE TO YOUR PROJECT:

CSS

< link href="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/css/minMaxClose.min.css" rel="stylesheet"/>

JS

< script src="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/individuals/minMaxClose.min.js">< /script>

USAGE:

minMaxClose({String} Element Id, {Object} options);

Element id: The id of the element we want to minimize, maximize and/or close.

Options: Object containing properties that allow you to customize your interactive elements.

Name	Type	Default	Description
close	Boolean	True	If set to False the won't be able to close the element.
minMax	Boolean	True	If set to False the won't be able to minimize and maximize the element.
minMaxIcons	Boolean	True	If set to False the element won't have minimize and maximize buttons.
minDoubleClick	Boolean	True	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.
minZone	HTML Element	document.body	This is the place where the minimized elements will live.

DEMO:

See the Pen Minimize - Maximize - Close by interactiveJS (@interactiveJS) on CodePen.

Draggable

Allows you user to drag your html elements.

ADD DRAGGABLE TO YOUR PROJECT:

JS

< script src="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/individuals/draggable.min.js">< /script>

USAGE:

draggable({String} Element Id);

Element id: The id of the element we want to make draggable.

DEMO:

See the Pen Draggable by interactiveJS (@interactiveJS) on CodePen.

Resizable

Allows you user to resize your html elements.

ADD RESIZABLE TO YOUR PROJECT:

CSS

< script src="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/css/resizable.min.css">< /script>

JS

< script src="https://cdn.jsdelivr.net/gh/interactiveJS/interactiveJS@v2.0.1/src/individuals/resizable.min.js">< /script>

USAGE:

resizable({String} Element Id);

Element id: The id of the element we want to make resizable.

DEMO:

See the Pen Resizable by interactiveJS (@interactiveJS) on CodePen.