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