moveable使目标可拖动、可调整大小、可缩放、可扭曲、可旋转、可收缩和可捕捉-html代码-BFW代码库

moveable使目标可拖动、可调整大小、可缩放、可扭曲、可旋转、可收缩和可捕捉

代码语言：html

所属分类：拖放

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["moveable.min"], function() {
                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 pinchable lets you use events that
                    // can be used in draggable, resizable, scalable, and rotateable.
                    pinchable: true, // ["resizable", "scalable", "rotatable"]
                    origin: true,
                    keepRatio: true,
                    // Resize, Scale Events at edges.
                    edge: false,
                    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, clien.........完整代码请登录后点击上方下载按钮下载查看