17 |
22 | Center Resize
18 | Corner Resize
19 | Free Resize
20 | Can't Move Outside
21 | 
](https://developergovindgupta.github.io/move-rotate-resizer)
15 | ## [DEMO-GH-Pages](https://developergovindgupta.github.io/move-rotate-resizer)
16 | ## [DEMO-CodeSandBox](https://codesandbox.io/s/move-rotate-resizer-demo-bh8q3)
17 | ## [DEMO-CodeSandBox](https://codesandbox.io/s/move-rotate-resizer-demo-2-3x33ys)
18 |
19 | ## How to use
20 | import resizer from 'move-rotate-resizer';
21 | or
22 | import resizer from './js/resizer.min.js';
23 | or
24 |
25 |
26 |
27 |
28 |
29 |
30 | ## Usase Example-1
31 |
32 | resizer.add(document.getElementById('div1'));
33 |
34 | ## Methods and Descriptions
35 | |Method|Description|
36 | |-|-|
37 | |add(target [,options])|add target dom element to resizer. it register event listener.|
38 | |remove(target)|remove target dom element from resizer. it remove all event listener.|
39 | |show(target)|show resizer handler on target dom element by javascript code.|
40 | |hide()|hide resizer handler by javascript code.|
41 |
42 | ## Properties and Descriptions
43 | |Propery|Description|
44 | |-|-|
45 | |target|return current selected target dom element|
46 | |resizer|return resizer handlers dom element|
47 | |hoverLine|return resizer hoverLine dom element|
48 |
49 | ## Dom Element Attribute
50 | |Attribute|Description|
51 | |-|-|
52 | |isLocked|"true" then resize handler can not change the target position or size|
53 | |isDisabled|"true" then resize handler not visible|
54 |
55 | ## Options passed with add method
56 | let options = {
57 | minWidth: 30, // minimum width in px
58 | minHeight: 30, // minimum height in px
59 | aspectRatio: true, // if true width height ratio will maintain
60 | resizeFromCenter: false, // if true then resize both side from center
61 | onDragStart: null, // call-back function that called when dragging start
62 | onDragging: null, // call-back function that called every mouse movement till mousedown
63 | onDragEnd: null, // call-back function that called when mouse button is released after move
64 | onResizeStart: null, // call-back function that called when any resize handler is start dragging
65 | onResizing: null, // call-back function that called every mouse movement till musedown
66 | onResizeEnd: null, // call-back function that called when release resize handler
67 | onRotateStart: null, // call-back function that called when rotate handler is started dragging
68 | onRotating: null, // call-back function that called every movement of rotate handler
69 | onRotateEnd: null, // call-back function that called when release rotate handler
70 | onResizerShown: null, // call-back function that called when resizer is first time shown on target
71 | onResizerHide: null, // call-back function that called when resizer is hide on target
72 | isHideOnResize: true, // if true then resizer will not visible at the time of dragging so that target visible clearly
73 | isHoverLine: true, // if true then target element on mouse hover hoverLine visible for highlight target element
74 | boundWithContainer:false, // if true/HTMLDivElement then target element can not move outside the container element.
75 | resizers: {
76 | n: true, // top middle resize handler true:visible|false:hidden
77 | s: true, // bottom middle resize handler
78 | e: true, // right middle resize handler
79 | w: true, // left middle resize handler
80 | ne: true, // top-right resize handler
81 | nw: true, // top-left resize handler
82 | se: true, // bottom-right resize handler
83 | sw: true, // bottom-left resize handler
84 | r: true, // rotate handler
85 | },
86 | };
87 |
88 | ### Note callBack function receive an props having properties
89 | |props-property|description|
90 | |-|-|
91 | |size|{left,top,width,height}|
92 | |angle|target element rotate angle|
93 | |evtTarget|resizer target element that call the callback function|
94 | |handler|current resize handler that is draging|
95 |
96 |
97 | ## Example Code
98 | ### HTML
99 |
100 |
101 |
102 |