Nuclear Pumpkin Mocha

    vue-auto-drag

    1.0.4 • Public • Published

    GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license

    NPM NPM

    vue-auto-drag

    自由拖拽div的vue组件, 上下左右或自由拖拽div,改变div的高度和宽度 auto drag components, drag you components to change height or width

    Example

    Demo Page 示例地址

    Changelog

    git commit

    use

    NPM

    npm install vue-auto-drag --save

    YARN

    yarn add vue-auto-drag

    props

    参数 说明 类型 默认值
    dragMove 自由拖拽 boolean false
    dragLeft 左侧拖拽 boolean false
    dragTop 顶部拖拽 boolean false
    dragRight 右侧拖拽 boolean false
    dragBottom 底部拖拽 boolean false
    maxWidth 拖拽最大宽度 number -
    minWidth 拖拽最大宽度 number -
    maxHeight 拖拽最大高度 number -
    minHeight 拖拽最小高度 number -

    Mount

    mount with global

    // require lib
    import Vue from 'vue'
    import VueAutoDrag from 'vue-auto-drag'
     
     
    // you can set default global options and events when use
    Vue.use(VueAutoDrag)

    mount with component

    // require component
    import VueAutoDrag from 'vue-auto-drag'
     
    // component
    export default {
        components: {
            VueAutoDrag
        }
    }

    Component

    <template>
        <div class="ui-auto-drag-wrap">
            <div class="container">
                <auto-drag  
                    :maxWidth="300"
                    :minWidth="100"
                    class="left-wrap" 
                    dragRight>
                    <div class="left">左</div>
                </auto-drag>
                
                <div class="main">
                    <auto-drag 
                        :maxHeight="300"
                        :minHeight="100"
                        class="top-wrap" 
                        dragBottom>
                        <div class="top">上</div>
                    </auto-drag>
                    <div class="center"></div>
                    <auto-drag class="bottom-wrap" dragTop>
                        <div class="bottom">下</div>
                    </auto-drag>
                </div>
                <auto-drag  class="right-wrap" dragLeft>
                    <div class="right">右</div>
                </auto-drag>
            </div>
            <auto-drag class="move-wrap" dragMove>
                <div class="move">移动</div>
            </auto-drag>
        </div>
    </template>
     
    <script>
    import AutoDrag from '../src/index.js';
    export default {
        components: {
            AutoDrag,
        }
    };
    </script>
     
    <style lang="scss">
    .ui-auto-drag-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        .container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
        }
        .left-wrap {
            height: 100%;
            width: 200px;
            border-right: 1px solid #e6e6e6;
            flex-shrink: 0;
        }
        .main {
            width: 100%;
            height: 100%;
            overflow: hidden;
            flex-shrink: 1;
            display: flex;
            flex-direction: column;
            .top-wrap {
                width: 100%;
                height: 200px;
                border-bottom: 1px solid #e6e6e6;
                flex-shrink: 0;
            }
            .center {
                width: 100%;
                height: 100%;
                flex-shrink: 1;
            }
            .bottom-wrap {
                width: 100%;
                height: 200px;
                border-top: 1px solid #e6e6e6;
                flex-shrink: 0;
            }
        }
        .right-wrap {
            height: 100%;
            width: 200px;
            border-left: 1px solid #e6e6e6;
            flex-shrink: 0;
        }
        .move-wrap {
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 3;
            width: 200px;
            height: 200px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
            box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.25);
        }
    }
    </style>

    Author

    zwfun

    License

    MIT License

    Keywords

    Install

    npm i vue-auto-drag

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    2.61 MB

    Total Files

    41

    Last publish

    Collaborators

    • aw_fun