https://github.com/daybrush/moveable 

https://daybrush.com/moveable/release/latest/doc/ 

? 특성! 

• Draggable 드래그 가능은 대상을 드래그하고 이동하는 기능을 말합니다.
• Resizable 크기 조정 가능은 대상의 너비와 높이를 늘리거나 줄일 수 있는지 여부를 나타냅니다.
• Scalable은 대상의 x 및 y가 변환 스케일 일 수 있는지 여부를 나타냅니다.
• Rotatable 회전 가능은 대상을 회전 할 수 있는지 여부를 나타냅니다.
• Warpable 뒤틀림은 대상이 뒤 틀릴 수 있는지 (왜곡되거나 구부러 질 수 있는지) 나타냅니다.
• Pinchable은 대상을 드래그 가능, 크기 조정 가능, 확장 가능, 회전 가능으로 고정 할 수 있는지 여부를 나타냅니다.
• SVG 요소 (svg, path, line, ellipse, g, rect 등) 지원
• 3D 변환 지원

⚙️ 설치 

npm 

$ npm i moveable

scripts 

<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>

? Documents 

API Documentation

? 사용 방법 

import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    // If the container is null, the position is fixed. (default: parentElement(document.body))
    container: document.body,
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
    // Enabling pincable lets you use events that
    // can be used in draggable, resizable, scalable, and rotateable.
    pinchable: true, // ["resizable", "scalable", "rotatable"]
    origin: true,
    keepRatio: true,
    throttleDrag: 0,
    throttleResize: 0,
    throttleScale: 0,
    throttleRotate: 0,
});
/* draggable */
moveable.on("dragStart", ({ target, clientX, clientY }) => {
    console.log("onDragStart", target);
}).on("drag", ({
    target, transform,
    left, top, right, bottom,
    beforeDelta, beforeDist, delta, dist,
    clientX, clientY,
}) => {
    console.log("onDrag left, top", left, top);
    target!.style.left = `${left}px`;
    target!.style.top = `${top}px`;
    // console.log("onDrag translate", dist);
    // target!.style.transform = transform;
}).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onDragEnd", target, isDrag);
});

/* resizable */
moveable.on("resizeStart", ({ target, clientX, clientY }) => {
    console.log("onResizeStart", target);
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => {
    console.log("onResize", target);
    delta[0] && (target!.style.width = `${width}px`);
    delta[1] && (target!.style.height = `${height}px`);
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onResizeEnd", target, isDrag);
});

/* scalable */
moveable.on("scaleStart", ({ target, clientX, clientY }) => {
    console.log("onScaleStart", target);
}).on("scale", ({
    target, scale, dist, delta, transform, clientX, clientY,
}: OnScale) => {
    console.log("onScale scale", scale);
    target!.style.transform = transform;
}).on("scaleEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onScaleEnd", target, isDrag);
});

/* rotatable */
moveable.on("rotateStart", ({ target, clientX, clientY }) => {
    console.log("onRotateStart", target);
}).on("rotate", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {
    console.log("onRotate", dist);
    target!.style.transform = transform;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onRotateEnd", target, isDrag);
});

/* warpable */
this.matrix = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
];
moveable.on("warpStart", ({ target, clientX, clientY }) => {
    console.log("onWarpStart", target);
}).on("warp", ({
    target,
    clientX,
    clientY,
    delta,
    dist,
    multiply,
    transform,
}) => {
    console.log("onWarp", target);
    // target.style.transform = transform;
    this.matrix = multiply(this.matrix, delta);
    target.style.transform = `matrix3d(${this.matrix.join(",")})`;
}).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onWarpEnd", target, isDrag);
});

/* pinchable */
// Enabling pincable lets you use events that
// can be used in draggable, resizable, scalable, and rotateable.
moveable.on("pinchStart", ({ target, clientX, clientY }) => {
    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
    console.log("onPinchStart");
}).on("pinch", ({ target, clientX, clientY, datas }) => {
    // pinch event occur before drag, rotate, scale, resize
    console.log("onPinch");
}).on("pinchEnd", ({ isDrag, target, clientX, clientY, datas }) => {
    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
    console.log("onPinchEnd");
});

? 패키지 

• react-moveable : 이동 가능, 드래그 가능, 크기 조정 가능, 확장 가능, 회전 가능, 변형 가능, 핀치 가능을 생성하는 반응 구성 요소입니다.
• preact-moveable : 이동 가능, 드래그 가능, 크기 조정 가능, 확장 가능, 회전 가능, 변형 가능, 핀치 가능을 만드는 Preact 구성 요소입니다.
• ngx-moveable : 이동 가능, 드래그 가능, 크기 조정 가능, 확장 가능, 회전 가능, 변형 가능, 핀치 가능을 만드는 각도 구성 요소입니다.
• vue-moveable (@probil) : 이동 가능, 드래그 가능, 크기 조정 가능, 확장 가능, 회전 가능, 변형 가능, 핀치 가능을 만드는 Vue 구성 요소입니다.