move-rotate-resizer
Advanced tools
Readme
npm install move-rotate-resizer
import resizer from 'move-rotate-resizer';
or
import resizer from './js/resizer.min.js';
or
<link rel="stylesheet" href="resizer.css" />
<script type="text/javascript" src="resizer.js"></script>
resizer.add(document.getElementById('div1'));
| Method | Description |
|---|---|
| add(target [,options]) | add target dom element to resizer. it register event listener. |
| remove(target) | remove target dom element from resizer. it remove all event listener. |
| show(target) | show resizer handler on target dom element by javascript code. |
| hide() | hide resizer handler by javascript code. |
| Propery | Description |
|---|---|
| target | return current selected target dom element |
| resizer | return resizer handlers dom element |
| hoverLine | return resizer hoverLine dom element |
| Attribute | Description |
|---|---|
| isLocked | "true" then resize handler can not change the target position or size |
| isDisabled | "true" then resize handler not visible |
let options = {
minWidth: 30, // minimum width in px
minHeight: 30, // minimum height in px
aspectRatio: true, // if true width height ratio will maintain
resizeFromCenter: false, // if true then resize both side from center
onDragStart: null, // call-back function that called when dragging start
onDragging: null, // call-back function that called every mouse movement till mousedown
onDragEnd: null, // call-back function that called when mouse button is released after move
onResizeStart: null, // call-back function that called when any resize handler is start dragging
onResizing: null, // call-back function that called every mouse movement till musedown
onResizeEnd: null, // call-back function that called when release resize handler
onRotateStart: null, // call-back function that called when rotate handler is started dragging
onRotating: null, // call-back function that called every movement of rotate handler
onRotateEnd: null, // call-back function that called when release rotate handler
onResizerShown: null, // call-back function that called when resizer is first time shown on target
onResizerHide: null, // call-back function that called when resizer is hide on target
isHideOnResize: true, // if true then resizer will not visible at the time of dragging so that target visible clearly
isHoverLine: true, // if true then target element on mouse hover hoverLine visible for highlight target element
boundWithContainer:false, // if true/HTMLDivElement then target element can not move outside the container element.
resizers: {
n: true, // top middle resize handler true:visible|false:hidden
s: true, // bottom middle resize handler
e: true, // right middle resize handler
w: true, // left middle resize handler
ne: true, // top-right resize handler
nw: true, // top-left resize handler
se: true, // bottom-right resize handler
sw: true, // bottom-left resize handler
r: true, // rotate handler
},
};
| props-property | description |
|---|---|
| size | {left,top,width,height} |
| angle | target element rotate angle |
| evtTarget | resizer target element that call the callback function |
| handler | current resize handler that is draging |
<!DOCTYPE html>
<html>
<head>
<title>move-rotate-resize:demo</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
<link rel="stylesheet" href="/node_modules/move-rotate-resizer/resizer.css" />
</head>
<body>
<h1>DEMO : move-rotate-resizer</h1>
<h2>resizer.js and resizer.css</h2>
<hr />
<div class="container">
<div id="div1" class="target">div1</div>
<div id="div2" class="target">div2</div>
</div>
</body>
</html>
<script src="src/index.js"></script>
import resizer from 'move-rotate-resizer';
document.querySelectorAll('.target').forEach((target) => {
resizer.add(target);
});
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div class="container">
<div class="content">
<div class="print-area">
<div id="center-resize" class="target" style="left: 400px; top: 200px;" isLocked="false" isDisabled="false">
Center Resize
</div>
<div id="corner-resize" class="target" style="left: 800px; top: 200px;">
Corner Resize
</div>
<div id="free-resize" class="target" style="left: 400px; top: 600px;">
Free Resize
</div>
<div id="bound-resize" class="target" style="left: 800px; top: 600px;">
Can't Move Outside
</div>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
import resizer from "move-rotate-resizer";
let options = {
onDragStart: function (e) {
e.target.style.opacity = "0.8";
e.target.style.zIndex = "999";
},
onDragging: function (e) { },
onDragEnd: function (e) {
e.target.style.opacity = "";
e.target.style.zIndex = "";
},
onRotateStart: function (e) {
e.target.style.opacity = "0.8";
e.target.style.zIndex = "999";
},
onRotating: function (e) { },
onRotateEnd: function (e) {
e.target.style.opacity = "";
e.target.style.zIndex = "";
},
onResizeStart: function (e) {
e.target.style.opacity = "0.8";
e.target.style.zIndex = "999";
},
onResizing: function (e) { },
onResizeEnd: function (e) {
e.target.style.opacity = "";
e.target.style.zIndex = "";
},
resizers: {
n: true,
s: true,
e: true,
w: true,
ne: true,
nw: true,
se: true,
sw: true,
r: true
}
};
let div1 = document.querySelector("#center-resize");
resizer.add(div1, { ...options, ...{ resizeFromCenter: true } });
let div2 = document.querySelector("#corner-resize");
resizer.add(div2, { ...options, ...{} });
let div3 = document.querySelector("#free-resize");
resizer.add(div3, { ...options, ...{ aspectRatio: false } });
let div4 = document.querySelector("#bound-resize");
resizer.add(div4, { ...options, ...{ boundWithContainer: true } });
document.body.addEventListener("click", function (e) {
resizer.hide();
});
FAQs
A simple javascript object that provide easy way to make any dom element resizable. It provide handles to move, resize and rotate target element. Optimized, fastest and easiest single javascript file.
The npm package move-rotate-resizer receives a total of 27 weekly downloads. As such, move-rotate-resizer popularity was classified as not popular.
We found that move-rotate-resizer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.