当前位置: 首页 > news >正文

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

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

文章目录

    • 参考
    • 基本拖拽
    • 基本缩放
    • 基本Scalable
    • 基本旋转
    • 基于原点的拖拽和旋转
    • 关于练习源码

参考

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

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

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

基本拖拽

在这里插入图片描述

基本缩放

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

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

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


http://www.mrgr.cn/news/828.html

相关文章:

  • 微信小程序中实现自动滚动
  • 白盒测试-发送请求
  • Java重修笔记 第三十六天 System类、大数据处理方案
  • 配置mysql5.7环境+使用python管理数据库+使用中间件mycat配置读写分离
  • 使用go实现一个简单的聊天服务器
  • 白骑士的C#教学实战项目篇 4.4 游戏开发
  • 优化大量数据导出到Excel的内存消耗(二):如果数据超出Excel单表上限,则进行分表
  • 前端面试题(二十五)|附赠完整面试流程
  • Python爬虫使用实例
  • Python 文件目录操作,以及json.dump() 和 json.load()
  • 安全自动化和编排:如何使用自动化工具和编排技术来提高安全操作效率。(第一篇)
  • k8s配置资源管理
  • 大学生科创项目在线管理系统的设计与实现
  • 宠物空气净化器推荐买吗?清除浮毛的效果好吗
  • LMDeploy 部署 VLMs 的方法与探讨
  • SuccBI+低代码文档中心 —数据管理
  • 基于web的人力资源管理系统的设计与实现
  • mybatisplus多数据源中关于不同类型的(mysql,oracle)数据库分页问题解决
  • 关于DNS的配置实验
  • 人工智能-自然语言处理(NLP)