simple-moveable
v0.0.0
Published
Simple and lightweight implementation of moveable API
Downloads
4
Maintainers
Readme
simple moveable
View this page in other languages:
Installation
npm
npm install --save simple-moveable
How to use
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