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

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

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

文章目录

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

参考

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

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

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

基本拖拽

在这里插入图片描述

基本缩放

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

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

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

http://www.lryc.cn/news/426335.html

相关文章:

  • 公开测评:文件防泄密系统哪家好|4款文件防泄密软件推荐
  • 【wiki知识库】09.欢迎页面添加(统计浏览量)Vue修改
  • ui自动化难点
  • 静态路由与默认路由和实验以及ARP工作原理
  • 美国洛杉矶大带宽服务器的运维与监控
  • AtCoder Beginner Contest 367 A~D
  • oracle 保留两位小数
  • Aop切面技术之存储用户信息
  • FreeBSD 针对OpenSSH 高危漏洞发布紧急补丁
  • 【C语言小项目】五子棋游戏
  • 基于Java语言的能源管理系统-水电气热油数据采集系统
  • 人工智能在肿瘤亚型分类领域的研究进展|顶刊速递·24-08-13
  • Taro+Vue 创建微信小程序
  • 智能安全守护,寺庙安全用电解决方案
  • 加热系统加入达温即停和保温功能
  • C++_2_ inline内联函数 宏函数(2/3)
  • ROS执行多个节点报错(遥控运动及SLAM建图)
  • Spring Boot项目中实现文件的上传、下载和预览功能
  • 【JAVA入门】Day21 - 时间类
  • SQL server数据库备份和还原
  • B站搜索建库架构优化实践
  • XSS反射实战
  • 远程消息传递的艺术:NSDistantObject在Objective-C中的妙用
  • 指向派生类的基类指针、强转为 void* 再转为基类指针、此时调用虚函数会发生什么?
  • 操作系统(Linux实战)-进程创建、同步与锁、通信、调度算法-学习笔记
  • react的setState中为什么不能用++?
  • 2.2算法的时间复杂度与空间复杂度——经典OJ
  • 【CentOS 】DHCP 更改为静态 IP 地址并且遇到无法联网
  • Linux 操作系统 --- 信号
  • 黑马前端——days09_css