jQuery拖拽表单(原创)

所属分类:输入-拖和放,丰富的输入

 24595  247  查看评论 (22)
分享到微信朋友圈
X
jQuery拖拽表单(原创) ie兼容10

更新时间:2019-11-27 23:15:14

更新说明:修改了index.js,修复了部分浏览器高度不同导致的无法放置控件的问题
特别说明:preview.js中包含控件很多事件,可以在index.js中调用getCenterHtml()来获取中部控件的html数据,preview.js就是针对中部控件事件的,其中包含常见的选填必填,正则表达式等判断


更新时间:2019-11-26 10:38:53

index文件夹有index.html页面,点击即可运行
控件需要拖拽至中部位置放置才可以,其他地方放置无效,只点击同意无效,js判断了鼠标放置的位置。

相关插件-拖和放,丰富的输入

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 45569  453

jQuery可任意拖拽排序菜单树机构树

jQuery可任意拖拽排序菜单树机构树
  拖和放
 44405  410

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38503  374

拖动滑块验证

拖动滑块进行验证
  拖和放
 66084  493

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

    带着猫咪去钓鱼 0
    2021/8/17 12:28:42
    发现一个问题;就是当拖动来的控件被删除后,右侧“属性栏”的设置条件没有对应得移除。 回复
    ③爺→ωδ爬上墙头等红杏 0
    2021/1/7 17:49:45
    当拖入控件后,再次删除完后,右侧属性栏还保留有数据 回复
    xiaoyangzeizhuai1989 0
    2020/5/8 14:46:48
    把这个多嵌套几层div会出现问题,不能拖动了 回复
    Harrison 0
    2020/3/11 11:04:44
    大佬 我想问下input的上下箭头失效了 不管点击上还是下 都是下面亮一下。。然后内容 不发生变化 怎么解决额 回复
    拾年 0
    2020/1/18 14:27:07
    作者大大,这个案例能不能改成自定义布局呢?,我想实现可以自己定义一行可以放多个控件。
    请问下有实现方式吗?求告知下思路
        拾年0
        2020/1/18 16:06:26
        麻烦提供点思路咯,就是希望在页面加载的时候,先把页面网格定义下来,如一行3列 一行4列这样的,然后在拖动控件进行填充
    回复
    xm0066 0
    2019/12/13 22:07:30
    能否做个生成代码的功能?
        白衣苍狗1
        2019/12/16 16:19:46

        index.js中有获取中部控件的html方法:

        getCenterHtml();

        获取的数据就是你要的代码

        xm00660
        2020/1/6 21:08:19
        谢谢!我学习学习研究研究,不懂的再来向你请教!
    回复
    木木 0
    2019/11/27 9:08:39
    为什么我打开演示页面,拖拽没有松开的效果呢!直接粘在鼠标上了....
        BattleofLexington0
        2019/11/27 9:13:10
        我也是这样的,下载下来的文件也一样,chrome和火狐都试过。
        白衣苍狗0
        2019/11/27 9:38:36
        下载下来也不行吗?
        白衣苍狗0
        2019/11/27 9:45:44
        我刚刚下载了试了,可以用啊,运行html文件夹的index.html就可以了,我的浏览器是谷歌(版本 78.0.3904.108(正式版本) (64 位)),然后测试的火狐也可以(70.0.1 (64 位)),不过我这边用360的确发生了放置不下去的问题,这个我会尽快优化
        BattleofLexington0
        2019/11/27 9:52:00
        我和你chrome版本一样,是运行的index.html文件,点击一托就粘在鼠标上了,然后要在点一下,左边的才出现。
        白衣苍狗1
        2019/11/27 10:06:50

        我刚刚已经修复这个问题了,已经提交更新,24小时内就会审核完成。
        你可以按我说的自行修改:
        先在index.js代码中查找:

        mouseX = e.screenX;
        mouseY = e.screenY;

        修改为:

        mouseX = e.clientX;//获取鼠标所在的x坐标
        mouseY = e.clientY;//获取鼠标所在的y坐标

        这样以后就可以用了

        好名字都被砖家起了0
        2019/11/28 15:27:32
        作者要是可以,在生成最终结果,和输出代码,就更好了。
        白衣苍狗1
        2019/11/29 11:47:36
        本来有个预览功能的,就是获取中部页面的html,然后配合preview.js里的事件,就可以达到你要的效果,不过预览的界面我只是简单的用了个弹框,样式没有做,我就干脆隐藏了,不过事件我没有删掉,你在index.js中,将滚动条滑到底部,最后那两个方法就是。
        index.js中有获取中部控件的html方法:
        getCenterHtml();
        你也可以自己修改进行二开
    回复
    白衣苍狗 0
    2019/11/26 18:46:31
    我不知道为什么这个查看演示所展示出来的功能有问题,下载下来应该都是可以拖拽放置在中部位置的 回复
    白衣苍狗 0
    2019/11/26 16:45:57
    当前只做了第一版,日后有空会持续更新的,不过这个已经搭好一个架子,需要其他控件,也可以根据自己的需求二次开发,代码和注释上面应该还是写的很清楚详细的
        BattleofLexington0
        2019/11/26 17:11:42
        老大可不可以改成直接拖拽,很需要这个功能。
        白衣苍狗0
        2019/11/26 18:44:30
        现在就是直接拖拽的,将左侧的控件拖拽到中部位置,松开鼠标控件就可以了啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复