请教各位前端大佬在线拖拽编辑的页面实现思路

[imherer]

首先申明不是打广告

最近一个朋友有个 批量生成证书 的需求。有点类似毕业证书或者获奖证书这种，除了姓名或几等奖不一样，其他内容基本都是一样的。

最开始的实现方式是，让他创建一个证书模板，就是填写好证书内容，然后批量导入姓名，最后就可以批量生成证书了

现在就 创建证书模板 他觉得不满意，想做成这种类似的效果： https://ue.818ps.com/?picId=1922617

它这个网站上功能挺多的，不需要这么多，基本上只需要可以通过拖拽方式改变文字的位置、大小、颜色等就行了

各位前端大佬，这种功能应该如何实现？思路是怎么样的呢？有现成的库吗？

[ssvfdn]

实现不复杂
1、创建容器
2、实现拖拽
3、创建节点与数据，数据用于保存文字的位置、大小、颜色、位置并且同步节点效果
3.1、创建的时候记住要生成唯一的 key 做为标记
3.2、数据{}，{'唯一 key':{ 'font-size':'', 'color':'','left':'0',top:'0'}, '唯一 key':{}}
4、提交的时候把数据提交给服务端保存就可以
--------
到时展示的时候也是通过保存的数据遍历解析就可以了。

[mengkun]

fabricjs 了解一下： http://fabricjs.com

[imherer]

@mengkun 谢谢。这个看着好像还可以。

[imherer]

@ssvfdn 1，2 步怎么实现呢？用什么技术？

[imherer]

@ssvfdn 单纯的拖拽还挺好实现的。主要是感觉就是通过拖船放大或缩小元素有点不好实现

[MiYogurt]

我为一个团队写过这种应用，性能不太好把控。其实就是修改一些属性而已没什么难的。https://github.com/MiYogurt/drop-test 你可以看一下这个，很简单。

[MiYogurt]

还有这个
https://miyogurt.github.io/vue-ibox/
https://github.com/MiYogurt/vue-ibox

我都好久没写前端代码了，呵呵。

[imherer]

@MiYogurt 感谢！

[plqws]

HTML5 Drag&Drop API 几分钟上手一下就可以了

[xiangyuecn]

目测 “拖拽” 方式改变文字的 “位置、大小、颜色” 是一个伪需求（同一种证书应该书写 位置 大小 是固定的吧😒 颜色就不知道了，如果不是，那每次都要拖来拖去，那也太好玩了）。简单点的给个输入框、下拉框 供填写和选择就 ojbk 了。制作好证书背景图和对应的坐标、字体配置，外加一个 canvas、一个导入 file input、一个导出 button，再加一个 jszip 打压缩包。纯原生手撸 js。一个 html 文件足以，服务器也可以省了😜

[lzuntalented]

https://github.com/lzuntalented/lz-h5-edit
最近实现的在线编辑库，基础编辑功能有了
你可以参考下

[ssvfdn]

@imherer 放大与缩小可以通过计算得改变 width 与 height 或者通过样式 zoom 解决
所说的技术对于节点操作比较好的可以考虑下 jQuery，不过原生 JS 也可以实现的
这里用到的技术不多，用原生 JS 也能简单搞定
这里需要你 CSS 与 JS 都有一定基础

[imherer]

@xiangyuecn 「“拖拽” 方式改变文字的 “位置、大小、颜色”」
同一种证书位置大小什么的确实是固定的。 要实现这个需求的主要目的是创建不同种类的证书

[xs12]

@mengkun 孟坤 ！！！