https://github.com/ruslang02/drag-resize
Drag and resize element library
https://github.com/ruslang02/drag-resize
Last synced: about 2 months ago
JSON representation
Drag and resize element library
- Host: GitHub
- URL: https://github.com/ruslang02/drag-resize
- Owner: ruslang02
- Created: 2018-12-01T14:42:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-02T10:59:32.000Z (over 6 years ago)
- Last Synced: 2025-01-13T20:34:05.211Z (4 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drag-resize JS library
For moving and resizing elements, only VanillaJS, maximum performance
Electron is _not_ required.
### Brief usage info
**new Draggable(element, options)**
- element - DOMNode to make draggable
- options
- handle - selector of nodes to trigger draggable _!important_
- cancel - selector of nodes that cancel triggering drag
**new Resizable(element, options)**
- element - DOMNode to make resizable
- options
- triggerSize - _integer_, size in PX of resize triggers
- edges: {top: _bool_, left: _bool_, right: _bool_, bottom: _bool_}, controls where to put triggers
### Example
```html
Hey, this is a title
I am not triggering drag
But I do!
#forceDrag {width:50px;height:50px;border:2px solid black;}
```
```javascript
new Draggable(document.querySelector("#window"), {
cancel: "main",
handle: "#dragArea"
});
new Resizable(document.querySelector("#window"), {
edges: {
top: true,
left:true,
bottom:true,
right:true
}
});
```