jquery-resizable.js jquery 拖拽改变元素大小的插件-BFW插件库

jquery-resizable.js jquery 拖拽改变元素大小的插件

第一步引入bfwone

第二步执行插件代码

示例如下，可直接运行和编辑

<!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="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery-resizable.min"], function() {
                $(".panel-left").resizable({
                    handleSelector: ".splitter",
                    resizeHeight: false
                });

                $(".panel-top").resizable({
                    handleSelector: ".splitter-horizontal",
                    resizeWidth: false
                });
            });
        });
    </script>
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            padding: 0;
            margin: 0;
            overflow: auto;
        }

        .page-container {
            margin: 20px;
        }


        /* horizontal panel*/

        .panel-container {
            display: flex;
            flex-direction: row;
            border: 1px solid silver;
            overflow: hidden;

            /* avoid browser level touch actions */
            xtouch-action: none;
        }

        .panel-left {
            flex: 0 0 auto;
            /* only manually resize */
            padding: 10px;
            width: 300px;
            min-height: 200px;
            min-width: 150px;
            white-space: nowrap;
            background: #838383;
            color: white;
        }

        .splitter {
            flex: 0 0 auto;
            width: 18px;
            background: url(//repo.bfw.wiki/bfwrepo/image/vsizegrip.png) center center no-repeat #535353;
            min-height: 200px;
            cursor: col-resize;
        }

        .panel-right {
            flex: 1 1 auto;
            /* resizable */
            padding: 10px;
            width: 100%;
            min-height: 200px;
            min-width: 200px;
            background: #eee;
        }


        /* vertical panel */

        .panel-container-vertical {
            display: flex;
            flex-direction: column;
            height: 500px;
            border: 1px solid silver;
            overflow: hidden;
        }

        .panel-top {
            flex: 0 0 auto;
            /* only manually resize */
            padding: 10px;
            height: 150px;
            width: 100%;
            white-space: nowrap;
            background: #838383;
            color: white;
        }

        .splitter-horizontal {
            flex: 0 0 auto;
            height: 18px;
            background: url(//repo.bfw.wiki/bfwrepo/image/hsizegrip.png) center center no-repeat #535353;
            cursor: row-resize;
        }

        .panel-bottom {
            flex: 1 1 auto;
            /* resizable */
            padding: 10px;
            min-height: 200px;
            background: #eee;
        }

        label {
            font-size: 1.2em;
            display: block;
            font-weight: bold;
            margin: 30px 0 10px;
        }

        pre {
            margin: 20px;
            padding: 10px;
            background: #eee;
            border: 1px solid silver;
            border-radius: 4px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <label>左右调整</label>
    <div class="panel-container">

        <div class="panel-left">
            left panel
        </div>

        <div class="splitter">
        </div>

        <div class="panel-right">
            right panel
        </div>
    </div>
     <label>上下调整</label>
    <div class="panel-container-vertical">

        <div class="panel-top">
            top panel
        </div>

        <div class="splitter-horizontal">
        </div>

        <div class="panel-bottom">
            bottom panel
        </div>
    </div>


</body>
</html>

配置参数

var opt = {
    // 拖放对象optional selector for handle that starts dragging
    handleSelector: null,
    // 改变宽度resize the width
    resizeWidth: true,
    // 改变高度resize the height
    resizeHeight: true,
    // 从右边改变宽度the side that the width resizing is relative to
    resizeWidthFrom: 'right',
    // 从下面改变高度the side that the height resizing is relative to
    resizeHeightFrom: 'bottom',            
    // 拖放开始事件hook into start drag operation (event,$el,opt passed - return false to abort drag)    
    onDragStart: null,
    // 拖放结束事件hook into stop drag operation (event,$el,opt passed)
    onDragEnd: null,
    // hook into each drag operation (event,$el,opt passed)
    onDrag: null
    // disable touch-action on the $handle
    // 防止手势操作冲突prevents browser level actions like forward back gestures
    touchActionNone: true
};

jquery-resizable.js jquery 拖拽改变元素大小的插件

网友评论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