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

|参数|说明|类型|默认值|可选值|支持的版本| |--|--|--|--|--|--| |gap|移动窗口距离可使用窗口的四周间距|Object|{top: 0, left: 0, right: 0, bottom: 0}|-|1.0.6+| |is-hide-nav|h5环境关掉导航栏|Boolean|false|true|1.0.4+| |disabled|禁止拖拽|Boolean|false|true|1.0.3+| |is-custom-nav|自定义导航栏时值为true|Boolean|false|true|1.0.0+| |coordinate|悬浮框的x轴和y轴|Object|{}|{ x: 0, y: 0 }|1.0.0+| |z-index|悬浮框层级|Number|100|-|1.0.0+|

Events

|事件名|说明|回调参数|支持的版本| |--|--|--|--| |stopMove|停止移动时，抛出去的方法|coordinate: {x: 0, y: 0}|1.0.0+|