UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery拖拽表单（原创）

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

 23409  246  查看评论 (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判断了鼠标放置的位置。

相关插件-拖和放,丰富的输入
查看更多

可拖拽图片文本框（类似QQ发送消息框）

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

jQuery九宫格拖拽效果

 九宫格拖拽效果简单上手附带代码注释详解
  拖和放
 28411  315

jQuery行间拖拽插件

 行与行之间移动，行内块状移动，小块独立一行
  拖和放
 27493  312

jquery 拖动复制

 jquery拖动div复制到表格
  拖和放
 44581  451

讨论这个项目（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
        现在就是直接拖拽的，将左侧的控件拖拽到中部位置，松开鼠标控件就可以了啊
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复