前端妹子狂喜，说她掌握拖拽框架了！

最新推荐文章于 2024-09-04 16:58:50 发布
最新推荐文章于 2024-09-04 16:58:50 发布
阅读量216 收藏
点赞数
分类专栏： 博客 图形化 源码分享 文章标签： spring boot linux 数据库 mysql Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MMKJSH/article/details/129050072
版权
源码分享 同时被 3 个专栏收录
291 篇文章 72 订阅
订阅专栏
图形化
164 篇文章 10 订阅
订阅专栏
博客
80 篇文章 2 订阅
订阅专栏
该文章介绍了一个前端项目，该项目实现了拖拽式模板编辑功能，包括模板中心、个人模板管理、素材和收藏，支持文本、多媒体元素以及各种形状。利用HTML、CSS、JS、React和MobX进行技术选型，提供控件属性设置、对齐操作及预览发布等高级功能。
摘要由CSDN通过智能技术生成

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

前端妹子狂喜，说她掌握拖拽框架了！

二、实现功能

  • 支持模版中心、我的模板

  • 支持我的作品、我的素材、我的收藏

  • 支持分类管理

  • 支持自定义模板

  • 支持文本、图片、各种形状、音频、视频

  • 支持对齐、保存、撤销、重做、播放、放大缩小

  • 支持预览发布

  • 支持对每个控件进行属性设置（包括颜色、尺寸、交互方式）

三、技术选型

  • html

  • css

  • js

  • react

  • mobx

四、界面展示

五、源码地址

私信回复：可拖拽表单

程序员小美
关注
专栏目录
几款常用的高质量Web前端框架！
xiaoxijing的博客
08-14 2051
近年来，Web前端技术的发展速度快得让人窒息，特别是最近几年一代又一代的变革一次又一次的创造。各大巨头又纷纷把技术转向HTML5和CSS3，各种企业级框架如雨后春笋般涌现。 那么今天就给大家介绍几个在Web前端界比较优秀的前端框架。 1、Bootstrap Twitter出品的Bootstrap在业界是非常受欢迎的，以致于有很多前端框架都在其基础上开发，如我们熟悉的WeX5就是在Bootstrap源码基础上优化而来的。我相信大多数接触过前端开发的同学多少都了解过这个优秀的前端框架。Bootstrap是基于
Web前端新手一定要知道的几个框架！
BOM485480的博客
04-28 2098
近年来，Web技术的发展速度快得让人窒息，特别是最近几年一代又一代的变革一次又一次的创造。各大巨头又纷纷把技术转向HTML5和CSS3，各种企业级框架如雨后春笋般涌现。 那么今天就给大家介绍几个在web界比较优秀的前端框架。 1、Bootstrap Twitter出品的Bootstrap在业界是非常受欢迎的，以致于有很多前端框架都在其基础上开发，如我们熟悉的WeX5就是在Bootstrap源码基础...
拖拽式流程绘制前端框架
04-16
拖拽式绘制流程，拖拽式绘制表单，包括个人事务，流程审批，日志查询等前端后台框架，如果感兴趣可以向我申请后台Java功能代码（系统复杂，功能代码暂未抽离）。
一个非常好用的前端框架，拖拽复制就能用
12-27
一个非常好用的前端框架，拖拽复制就能用，包含各种报表、列表、菜单、登录、注册、搜索、图表、…………
前端强大的拖拽工具库vue-draggable-plus
最新发布
mopmgerg54mo的博客
09-04 1325
定义：vue-draggable-plus是一个Vue.js的第三方插件，用于实现元素的拖拽功能，特别适用于需要复杂拖放操作的场景，如列表排序、元素定位等。兼容性：支持Vue.js >= 3 或 Vue.js >= 2.7。功能特点：提供了多种用法选项，包括组件、函数调用和指令；支持滚动条滚动拖拽；支持悬浮拖拽；提供了丰富的API和事件监听，如move、add、remove、start、end等，用于自定义控制拖拽行为。
前端zrender框架使其可拖拽
小龙哒的博客
03-13 5010
废话不多说，上代码，代码都有注释 loadCamera: function (item, i) { //加载方法 item是实体类参数 //两个miter是为了适应屏幕自适应 let widthMiter = 1920/document.body.clientWidth; let heightMiter = 1080/document.body.clientHeight; ...
简易而又灵活的Javascript拖拽框架（一）
08-04
js拖拽的时候，发现了一个强大而又灵活的拖拽框架，（之前用了代码混淆器，还好代码比较短，我就翻译过来了）利用这个框架不仅能实现简单的拖动，更能轻易的实现各种复杂的拖放功能。这一篇先实现最简单的拖拽，稍微复杂的拖放将在后面的文章里写出来。
妹子UI框架
01-21
总的来说，"妹子UI框架"是一个适合快速构建企业级后台管理系统的前端框架，通过其提供的组件和模板，开发者可以轻松打造出专业级别的网页应用。无论你是初学者还是经验丰富的开发者，都可以从中受益，提升你的开发...
常用前端UI框架
热门推荐
qq_57035859的博客
01-01 1万+
Bootstrap 首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得
【前端 5】拖拽
该怎么解释？我懒得解释
08-15 831
简述：实现拖拽，关键的地方：鼠标抬起（mouse-up）事件、鼠标落地(mouse-down)事件、对象的拖拽事件。那么在这个过程中，需要注意的点是：获取鼠标焦点在可视窗口的具体位置（x,y），以及各个浏览器的兼容，鼠标的可拖拽范围控制等！ 一、实现要点 1.1，让指定对象可拖拽 $("div[id^='chooseCourse']").draggable(); 本行代码表示，获取
低代码信创开发核心技术（二）：手撕灵活好用的Vue拖拉拽布局系统
杨若瑜的技术博客
05-16 2559
随着信息化时代的到来，软件已经成为企业和个人不可或缺的工具。然而，许多人在开发软件时遇到了各种问题，比如开发周期长、技术门槛高、成本高昂等等。为了解决这些问题，低代码平台应运而生。低代码平台是一种快速开发工具，它可以帮助开发者快速构建应用程序，从而提高开发效率和降低成本。近年来，国产软件市场蓬勃发展，越来越多的企业开始关注自主创新和信息化发展。低代码平台作为信息化创新的重要工具，也逐渐受到了广泛关注。同时，随着Vue.js等前端框架的普及，拖拉拽布局系统也成为了低代码平台的核心技术之一。
低代码拖拽开发平台框架 JNPF3.3 3.4 全部版本框架源码 分享学习
m0_73482679的博客
08-31 329
JNPF快速开发框架是一个可复用的设计构件，使用JNPF的编程人员可以在一个通用功能已经实现的基础上开始具体的系统开发
antd+vue弹窗实现拖拽功能
nice444638562的博客
07-17 2530
请注意，上述只是一个简单的示例，你还可以根据实际需求进行更多自定义和扩展。另外，如果你想添加更高级的拖拽功能，你可能需要使用其他拖拽库或自行编写代码来实现。请注意，这只是一个简单的示例，仅实现了最基本的拖拽功能。你可以根据你的实际需求自定义自己的指令，并在其中添加更多的拖拽逻辑和样式。另外，如果你使用的是 TypeScript，记得在 Vue 组件中添加指令的类型声明。上面的代码中，我们使用了 Modal 组件来创建弹窗，并在弹窗内部嵌套了。你可以根据需要自定义弹窗的样式和内容，以及在。
拖拽化、低代码、可视化布局学习资料搜集
weixin_37391237的博客
05-15 5134
整理收集的可视化布局平台
【支持拖拉拽的可视化图表解决方案】
雨夜
03-15 4280
提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。因为是原生 js 写的，所以不分前端框架，不管 Vue、还是 React 都支持。思路就是：判断是否有新增的图表，如果有，就计算出 新的需要占的总高度，把老的图表重新计算 y 轴上的位置，统一往下赶一赶，这样就给新的在顶部（倒序）留出出空的位置了。
前端实现拖拽的方案
望京十三兄的博客
04-06 3743
创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。
前端实现可拖拽流程的js框架
make_progress的博客
09-16 8142
前端实现流程图js框架
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员小美

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

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

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

打赏作者

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

抵扣说明：

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

余额充值