更新记录

1.0.6（2025-04-30） 下载此版本

添加gap属性，移动窗口距离可使用窗口的四周间距

1.0.5（2025-04-28） 下载此版本

去掉打印（console.log）

1.0.4（2025-04-28） 下载此版本

增加is-hide-nav属性；h5环境关掉导航栏

平台兼容性

uni-app

其他

npm下载量：

欢迎使用 c-movable-box

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=22044
npm install c-movable-box

使用方法，不能每次拖动都修改coordinate，会有bug

<template>
    <view class="box">
        <c-movable-box :coordinate="coordinate" @stopMove="stopMove">
            <button>测试</button>
        </c-movable-box>
    </view>
</template>

<script>
    // 以下导入方式按照安装方式导入，二选一
    // 插件市场不需要导入，直接使用c-movable-box
    // npm导入方法
    import cMovableBox from "c-movable-box";        
    export default {
        components: {
            cMovableBox
        },
        data() {
            return {
                coordinate: {
                    x: 0,
                    y: 100
                }
            }
        },
        methods: {
            stopMove(e) {
                console.log("停止移动后的x轴位置：", e.x);
                console.log("停止移动后的y轴位置：", e.y);
                // 这边每次拖动结束都赋值coordinate，会出现bug
                // this.coordinate = e;
            }
        }
    }
</script>

API

Props

Events