vue拖拽效果(适用范围自定义表单,电子合同签章等)
vue拖拽效果实现实现思路首先需要可以拖拽的控件, 鼠标长按拖拽到拖拽存放区后,松开鼠标拖拽存放区生成当前拖拽对象,在给当前生成的拖拽对象进行可拖拽处理,最后可以对当前生成的拖拽对象进行属性的修改。实现步骤1.给需要拖拽的对象设置可拖拽属性2.本地创建拖拽列表(本地模拟的)3.渲染拖拽列表,添加拖拽事件(开始,之间,结束)4.给拖拽存放区添加拖拽存放区事件5.js代码,拖拽事件6.根据生成的拖拽对
·
vue拖拽效果实现
-
实现原因
之前项目需求做一个自定义拖拽控件,进行自定义表单生成以及电子合同签字盖章,总结一下思路。 -
实现思路
首先需要可以拖拽的控件, 鼠标长按拖拽到拖拽存放区后,松开鼠标拖拽存放区生成当前拖拽对象,在给当前生成的拖拽对象进行可拖拽处理,最后可以对当前生成的拖拽对象进行属性的修改。 -
实现步骤
1.给需要拖拽的对象设置可拖拽属性
2.本地创建拖拽列表(本地模拟的)
3.渲染拖拽列表,添加拖拽事件(开始,之间,结束)
4.给拖拽存放区添加拖拽存放区事件
5.js代码,拖拽事件
6.根据生成的拖拽对象列表,渲染拖拽存放区上的拖拽对象(可以使用v-if,根据type值生成不同的对象了,例如(input框、日期、签章、下拉框、多选、单选等))
-
效果展示
4.如有帮助,可以给个star gitee 仓库地址
更多推荐
已为社区贡献1条内容
所有评论(0)