Tmagic-editor低代码底层拖拽库Moveable示例学习

在前面咱们的自研低代码海报制作平台学习分享计划中分享了自己开发的基本拖拽组件,也只是做了最简单的基本实现。真要写产品,更多还是依赖相关的开源优秀库。

参考

参考转发博文:低码编辑器中的“拖拽”是如何实现的

参考腾讯出品的Tmagic-editor
在这里插入图片描述
这款优秀的低代码拖拽编辑器底层用到了开源拖拽库Moveable

大家学习可以参考:Moveable官方参考示例,以下是笔者展示的相关的示例练习截图:

基本拖拽

在这里插入图片描述

基本缩放

默认不限制,也可以设置在min-widthmin-heightmax-widthmax-height范围内进行缩放
在这里插入图片描述

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

在之前搭建好的vite脚手架工程中以vitepress示例的形式进行练习,后续会将上述的拖拽练习,封装成组件以实现在自研低代码海报平台中复用。
在这里插入图片描述

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Moveable-view 滑动验证是一种常见的人机验证方式,其原理是通过用户在屏幕上滑动 Moveable-view 组件来完成验证,以确认用户是真人而不是机器人。 具体实现步骤如下: 1. 在页面中添加一个 Moveable-view 组件,并设置其样式和位置。 2. 监听 Moveable-view 组件的 touchstart,touchmove 和 touchend 事件,以获取用户滑动时的手指位置信息。 3. 根据用户滑动的距离和方向,判断是否完成验证。 4. 验证成功后,执行相应的操作,如提交表单等。 下面是一个简单的示例代码: ```html <view class="moveable-view"> <moveable-view class="inner-view" direction="horizontal" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"> <image src="https://xxx.com/slider.png"></image> </moveable-view> </view> ``` ```css .moveable-view { width: 300rpx; height: 150rpx; position: relative; } .inner-view { width: 150rpx; height: 150rpx; position: absolute; top: 0; left: 0; } ``` ```javascript Page({ data: { startX: 0, moveX: 0, success: false }, onTouchStart: function (e) { this.setData({ startX: e.touches[0].clientX }) }, onTouchMove: function (e) { this.setData({ moveX: e.touches[0].clientX - this.data.startX }) }, onTouchEnd: function () { if (this.data.moveX >= 150) { this.setData({ success: true }) // 验证成功,执行相应的操作 } else { this.setData({ moveX: 0 }) // 验证失败,重置状态 } } }) ``` 在这个示例中,我们通过监听 Moveable-view 组件的 touchstart,touchmove 和 touchend 事件,获取用户滑动的手指位置信息,并根据滑动距离和方向来判断是否完成验证。如果滑动距离超过 150rpx(即图片的宽度),则认为验证成功。否则,我们将滑块重置为初始状态,等待用户重新滑动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值