uni-app组件：movable-area/movable-view实现可拖动的view(hbuilderx 3.6.18)

一，代码：

<template>
    <view>
        <movable-area style="width:750rpx;height:750rpx;background: #ffff00;">
            <movable-view style="width:120rpx;height:120rpx;border-radius:20rpx; background: #ff0000;"
            :x = x :y=y direction="all" @change="onChange"
            >
                
            </movable-view>
        </movable-area>
        
        <button style="width:700rpx;margin-left: 25rpx;margin-top: 25rpx;" @click="move">用程序移动</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                x:0,
                y:0,
                tmpx:0,   //保存移动到的位置x
                tmpy:0,   //保存移动到的位置y
            }
        },
        methods: {
            move:function() {
                this.x = this.tmpx;
                this.y = this.tmpy;
                setTimeout(()=>{
                    this.x = 150;
                    this.y = 150;
                })
            },
            onChange:function(e){
                this.tmpx = e.detail.x;
                this.tmpy = e.detail.y;
            },
        }
    }
</script>

<style>

</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-zu-jian-movablearea-movableview-shi-xian-ke-tuo-dong/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看hbuilderx的版本: