可拖动、可缩放、可旋转div的js插件-BFW插件库

可拖动、可缩放、可旋转div的js插件

使用方式：

第一步引入bfwone，准备div

<div id='example'>
  Element to drag, resize, rotate
</div>

第二步use插件及css和主题css

    <script type="text/javascript">
        bready(function() {
            use(["subj", "subj"], function() {
                Subj('#draggle').draggle({
                    //optional parameters
                    drop: (e, el) => {
                        console.log(el);
                    },
                    snap: 20
                });

                Subj('#clone').clone({
                    stack: '#stack',
                    //optional parameters
                    style: 'clone',

                });
            });
        });
    </script>

第三步配置参数

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["subj", "subj"], function() {
                Subj('#draggle').draggle({
                    //optional parameters
                    drop: (e, el) => {
                        console.log(el);
                    },
                    snap: 20
                });

                Subj('#clone').clone({
                    stack: '#stack',
                    //optional parameters
                    style: 'clone',

                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <h1>可拖动、可缩放、可旋转js插件</h1>
    <div id='draggle' style='position: absolute;width:100px;height:100px; background-color:#C0392B;top:250px; left:250px;'></div>
    <div id='clone' style='z-index:111;position: absolute;width:100px; height:100px;background-color: green'></div>

 
    <div id='stack' style='width:100px; height:100px;'></div>
    <script>


    </script>
</body>
</html>

可拖动、可缩放、可旋转div的js插件

网友评论0

gridly.js

jquery-resizable.js

drag.js

draggabilly.js

impetus.min.js

jquery.dad.min.js

subjx.js

interact.min.js

subj.js

moveable.min.js