jQuery拖拽表单可视化表单

所属分类:输入-拖和放

 15154  92  查看评论 (6)
分享到微信朋友圈
X
jQuery拖拽表单可视化表单 ie兼容12

更新时间:2021-08-17 01:33:43

该代码还在持续完善中,目前已经实现了导入,导出,预览,提取内容等,代码写的比较乱,更多的功能,更好的封装,正在持续更新中 

新增

  • 所有控件定义在数组中,自由增减,属性和样式均定义为方法,自由改变 

  • 单选框,多选框,下拉框等增加默认选中 

  • 属性窗口增加主动关闭 

  • 所有元素增加控件ID,并展示在设计窗口 

  • 增加清空所有元素 

  • 增加导出JSON格式数据 

  • 增加导入JSON格式数据 

  • 实现表单预览,以json格式渲染表单的方式 

  • 获取表单数据 

  • 表单属性可以设置标签对齐方式(居左,居右,局上),标签宽度 

修复 

拖动元素后,如果未正确拖动到设计区域,隐藏提示线 删除控件后属性框不会消失

不可以鼠标拖动选择输入的内容和标签文字 

优化 

所有元素设定不同自定义图标,更加美观直观 

设计界面增加提示线,方便看到元素占用 

美化操作按钮样式,功能不变,占用空间更小,方便扩展 

调整部分文本提示 

校验错误默认隐藏不占据空间,有错误时展示,无错误时隐藏 

调整为左中右固定布局,两侧250px,中间拉满 拖动新元素或删除旧元素时隐藏属性窗口 

完善校验规则判断,无校验要求的视为校验通过 

移除弹窗js,改用bootstrap自带的模态框 优化校验规则,校验通过返回表单数据 radio类型的属性如果数量大于2则每行只展示一个 属性过多滚动条显示由于白衣苍狗的jQuery拖拽表单(原创)停滞更新,在他的基础上完善迭代

相关插件-拖和放

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 86980  474

页面多板块拖动,调整边缘,吸附效果(原创)

接到一个需求:楼宇房间的简单布局:点击左侧房屋号码,到右面出现以后可以各种调整。
  拖和放
 31523  358

Sortable – 简单灵活的 JavaScript 拖放排序插件

Sortable 简单灵活的 JavaScript 拖放排序插件
  拖和放
 103376  445

可拖拽图片文本框(类似QQ发送消息框)

支持拖拽图片,并且将图片转换为base64,兼容IE8以上所有浏览器
  拖和放
 30279  304

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    胖子界的李先生 0
    2021/12/14 15:12:36
    自定义表单搭建完,怎么使用?其他地方需要引入怎么引? 回复
    Doer° 0
    2021/10/20 14:21:25
    返回的json数据有点不太对啊,一直返回默认选择项
        wanglong1260
        2021/10/20 14:30:30
        查看演示中简单测试结果都正确,暂时没发现问题
        另外近期工作比较忙,在忙其它,新版本基本雏形都完成了,等完善后也会一并发布
        Doer°0
        2021/10/22 9:32:19

        现在有个项目想用下您这个插件,需求是自定义构建表单之后,可以点击向后端发送数据,现在有个问题是,您这个组织数据导出的地方有两个,一个是‘导出JSON’,一个是“预览表单”里面的‘数据提取’;

        1、点“导出JSON”吧有个问题,导出的value值一直是默认勾选里的输入项,能不能做个联动,我点选项也能添加value值呢;

        2、或者拖拽设计完表单,点‘预览表单’,在那里面提交正确数据,那里面数据有个问题是,多选框返回的value值只有最后一个,我看是循环遍历的时候控件id直接等于控件值了

    回复
    ??? ° 0
    2021/8/18 10:53:30
    作者能不能加个联动下拉框
        wanglong1260
        2021/8/18 10:57:03
        可以的,这个版本扩展性还不是太强,等重构新版后爸擦,要过一小段了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复