https://github.com/edgetranslate/simple-moveable
Simple and lightweight implementation of moveable API
https://github.com/edgetranslate/simple-moveable
Last synced: 5 months ago
JSON representation
Simple and lightweight implementation of moveable API
- Host: GitHub
- URL: https://github.com/edgetranslate/simple-moveable
- Owner: EdgeTranslate
- License: mit
- Created: 2020-09-16T08:43:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-10T02:22:33.000Z (over 5 years ago)
- Last Synced: 2025-04-19T06:57:50.994Z (about 1 year ago)
- Language: TypeScript
- Size: 492 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MIT
Awesome Lists containing this project
README
# simple moveable
[](https://github.com/EdgeTranslate/simple-moveable/blob/master/LICENSE.MIT)
[](https://github.com/EdgeTranslate/simple-moveable/releases)
[](https://travis-ci.org/EdgeTranslate/simple-moveable)
View this page in other languages:
* [简体中文](./docs/README_CN.md)
* [繁體中文](./docs/README_TW.md)
## Installation
### npm
```
npm install --save simple-moveable
```
## How to use
```js
import moveable from "simple-moveable";
const moveableElement = new moveable(element,{
resizable: true,
draggable: true,
directions: [s, se, e, ne, n, nw, w, sw,],
/* set threshold value to increase the resize area */
// threshold: { s: 5, se: 5, e: 5, ne: 5, n: 5, nw: 5, w: 5, sw: 5 },
// threshold: { edge:5, corner:5 },
threshold: 10,
/**
* set thresholdPosition to decide where the resizable area is
* "in": the activated resizable area is within the target element
* "center": the activated resizable area is half within the target element and half out of the it
* "out": the activated resizable area is out of the target element
* a number(0~1): a ratio which determines the how much the the activated resizable area beyond the element
*/
// thresholdPosition: "in",
// thresholdPosition: "center",
// thresholdPosition: "out",
thresholdPosition: 0.9
})
let startTranslate = [0, 0];
/* draggable events*/
moveableElement
.on("dragStart", ({ set }) => {
set(startTranslate);
})
.on("drag", ({ target, translate }) => {
startTranslate = translate;
target.style.transform = `translate(${translate[0]}px,${translate[1]}px)`;
}).on("dragEnd",({ translate }) => {
startTranslate = translate;
})
.on("resizeStart", ({ set }) => {
set(startTranslate);
})
.on("resize", ({ target, width, height, translate, inputEvent }) => {
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
})
.on("resizeEnd", ({ translate, width, height, inputEvent, target }) => {
startTranslate = translate;
target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
});
```
## Contact Us
E-mails: [Mark Fenng](mailto:f18846188605@gmail.com)