自定义表单设计,以拖拽方式的

就是写一个自定义表单的方式来,设计表单。
如下图图片描述

图片描述

怎样实现

阅读 10.7k
6 个回答

正好这两天在做这个,我的做法是:

  1. 左侧表单挂各类型属性
  2. 监听鼠标按下事件,生成相应DOM,并鼠标X、Y记录位置
  3. 监听document鼠标移动事件,根据X、Y的变化改变生成的DOM位置坐标
  4. 监听document鼠标抬起事件,判断移动完坐标是否在指定容器中,在就将生成DOM插入容器,否则出个提示
  5. 如果右侧还要表单元素之间能够交换顺序的话,取出目标元素的上一个兄弟元素和下一个,根据表单高度来判断它的高度

刚刚码完字就看到你自己的评论,如果你不想自己写,还真有Sortable....我还没码完就....捂脸.png

有类似的开源的代码或插件吗

Vue.Draggable

我现在也在做表单拖拽, 楼主可以一起交流下不。

新手上路,请多包涵

kooboo,提供自定义表单方式,而且响应速度快一键部署,修改完了可以在浏览器输入链接直接查看建站的效果。还配备了后台管理系统可以监控网站的流量等数据,而且是免费的开源软件,感觉应该能满足你的要求,更多具体的信息你可以了解一下文档,我个人是强烈安利!!!
文档:https://link.zhihu.com/?targe...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题