jquery/Bootstrap表单动态拖拉拽添加

最新推荐文章于 2024-07-04 16:29:51 发布
最新推荐文章于 2024-07-04 16:29:51 发布
阅读量1.3w 收藏 21
点赞数 3
分类专栏： javascript 文章标签： 表单 动态表单 drag 拖拉拽 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianjunwenhappy/article/details/79682178
版权

拖拉拽动态表单

最近做项目，遇到了一个新的要求，客户自己配置表单，用到什么form组件不确定，数量不确定，不懂程序，听到我就蒙了，没办法，客户是上帝，做吧。经过讨论，准备做两套方案，一个是添加按钮，选择组件添加，另一种，在线表单构造拖拉拽实现。我用拖拉拽做的，按钮添加网上跟多，我就不做了，给你们将一个简单的例子，最后附上第一版的代码，你们看看也就懂了。大家一起努力，撸起袖子继续干！

先看效果图，不满意请转弯…

效果图

技术点摘要：

DataTransfer 对象：退拽拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：

<div draggable="true">拖拽我</div>

ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 ondragenter
事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 ondragover
事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop
事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 ondragend
事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上 Event.preventDefault()
方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。

上代码：

已将样式和jquery、bootstrap替换为cdn，复制即可查看效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">


  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style type="text/css">
    .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 636px;
    padding:20px;
  }
  .item{
    height: 60px;
    border:0px solid #333;
    /*border-radius: 4px;
    border-style: dashed;*/
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .moveStyle{
    border:1px solid #999;
    border-radius: 4px;
    background: #eee;
  }
  #removeBox{
    height: 100px;
    width: 100px;
    border:2px dashed #999;
    background: rgba(0,0,0,0,3);
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: url(deleteBox.png) no-repeat;
    background-size: 90%;
    background-position: center center;
  }
  #showCode{
    position: absolute;
    left: 20px;
    bottom: 10px;
  }
  .flxed{
    position: relative;
    top: 0;
    left: 0;
  }
  </style>
</head>
<body>
  <div id="app">
    <div class="row">
      <div class="col-md-4">
        <div class="grid-content bg-purple">
        <div id="ComponentFactory">
          <div class="item" id="item1" draggable="true">
            <!-- 输入框 -->
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-3 control-label">输入框</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
              </div>
            </div>
          </div>


          <div class=" item " id="item3" draggable="true">
            <!-- 复选框 -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">复选框</label>
            <div class="col-sm-9">
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
              </label>
            </div>
          </div>
        </div>

          <div class=" item " id="item4" draggable="true">
            <!-- 单选框 -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">单选框</label>
            <div class="col-sm-9">
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
              </label>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
              </label>
              <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
              </label>
            </div>
          </div>
        </div>
          <!-- 下拉列表框 -->
        <div class=" item " id="item5" draggable="true">
          <!-- 下拉列表框 -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">下拉列表</label>
            <div class="col-sm-9">
              <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
        </div>


        <div class=" item " id="item7" draggable="true">
          <!-- （一般信息）Info -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">按钮</label>
            <div class="col-sm-9">
              <button type="button" class="btn btn-info">（一般信息）Info</button>
            </div>
          </div>
        </div>

        <div class=" item " id="item8" draggable="true">
          <!-- （成功）Success -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">按钮</label>
            <div class="col-sm-9">
              <button type="button" class="btn btn-success">（成功）Success</button>
            </div>
          </div>
        </div>

        <div class=" item " id="item9" draggable="true">
          <!-- （危险）Danger-->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">按钮</label>
            <div class="col-sm-9">
              <button type="button" class="btn btn-danger">（危险）Danger</button>
            </div>
          </div>
        </div>

        <div class=" item " id="item11" draggable="true">
          <!-- 按钮组 -->
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">按钮组</label>
            <div class="col-sm-9">
              <button type="button" class="btn btn-success  btn-sm">（成功）Success</button>
              <button type="button" class="btn btn-danger  btn-sm">（危险）Danger</button>
            </div>
          </div>
        </div>

      <!-- 文本域 -->
        <div class=" item" id="item10" draggable="true">
          <!-- 文本域 -->
          <div class="form-group ">
            <label for="inputEmail3" class="col-sm-3 control-label">文本域</label>
            <div class="col-sm-9">
              <textarea class="form-control " rows="2"></textarea>
            </div>
          </div>
        </div>

      </div>

    </div>
    </div>
    <div class="col-md-4" class="flxed">
      <div class="grid-content bg-purple-light" id="box"></div>
      <div class="bg-purple-light" id="removeBox">
      </div>
    </div>
    <div class="col-md-4" class="flxed">
        <div class="grid-content bg-purple-light" id="codeBox"></div>
        <el-button id="showCode">查看源码</el-button>
    </div>
  </div>

  </div>
  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">修改名称</h4>
      </div>
      <div class="modal-body">
          <input type="email" class="form-control" id="input" placeholder="请输入名称">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="save">保存修改</button>
      </div>
    </div><!-- /.modal-content -->
    </div>
  </div>
</body>
  <script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>
    $(function(){

      //修改label的值
      $(document).on('dblclick','#box label',function(){
        $('#myModal').modal('show');
        $("#input").val("");
        var randId = parseInt(Math.random() * (1000000 - 1 + 1) + 1);
        $(this).attr("id",randId);
        $("#save").attr("saveId",randId);
        console.log("id",randId);
      })

      //修改label的值
      $(document).on('dblclick','#box button',function(){
        $('#myModal').modal('show');
        $("#input").val("");
        var randId = parseInt(Math.random() * (1000000 - 1 + 1) + 1);
        $(this).attr("id",randId);
        $("#save").attr("saveId",randId);
        console.log("id",randId);
      })


      //保存input框的值
      $("#save").click(function(){
        $('#myModal').modal('hide');
        var value = $("#input").val();
        var id = $(this).attr("saveId");
        $("#"+id).text(value);
      })


      //开始拖动
      $(".item").on("dragstart",function(e){  
          console.log("SET -> addBuffer",e.target.id);
          e.originalEvent.dataTransfer.setData("addBuffer",e.target.id);  
          e.originalEvent.dataTransfer.effectAllowed = 'all'; 
          e.originalEvent.dataTransfer.dropEffect = 'all'; 
          e.originalEvent.dataTransfer.setDragImage(this,0,0); 
          $("#"+e.target.id).addClass("moveStyle");

      }); 
      $("#box").on("dragover",function(e){  
          e.originalEvent.preventDefault();  
      }) 
      $("#removeBox").on("dragover",function(e){  
          e.originalEvent.preventDefault();  
      }) 
      //放下事件  
      $("#box").on("drop",function(e){  

          var id = e.originalEvent.dataTransfer.getData("addBuffer"); 
          $("#"+id).removeClass("moveStyle");

          var item = "item"+parseInt(Math.random() * (1000000 - 1 + 1) + 1);
          //$("#"+id).attr("id",item);
          console.log("GET-> addBuffer:",item);
          $(this).append($("#"+id).clone().attr("id",item));  
          //给新加入的元素添加拖放事件  
          $("#"+item).on("dragstart",function(e){  
              e.originalEvent.dataTransfer.setData("removeBuffer",e.target.id);  
              console.log("TO -> removeBuffer",e.target.id);
          });


      })  
      $("#removeBox").on("drop",function(e){  
        e.originalEvent.preventDefault;               
        var r = e.originalEvent.dataTransfer.getData("removeBuffer");  
        /*console.log(r);*/
        if(r == null || r == ''){
          alert('error!');
          return;
        }
        $("#"+r).remove();
      }) ;


      $("#showCode").click(function(){
        $("#codeBox").text("");
        var code = $("#box").clone().html();
        if(code == null || code == ''){
          alert("请先选择控件！");
          return ;
        }
        $("#codeBox").text(code);
      })
    })
  </script>
</html>

目前可以拖拽组件到中间区域（视图区），视图区的组件可以拖放到删除框里，右侧点击查看代码可以查看视图区的组件代码。在视图区，可以双击组件名称修改组件laebl的名称。一个简单的拖拽form表单就展示完了，不足的地方，视图区组件的详细编辑没有完善，查看代码也没有格式化，后续会继续完善。有更好建议或者案例可以@ 我，我会继续学习的。希望这个能帮助大家。

J-wen
关注
  • 3
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootStrap模态框实现可拖拽、半透明功能
di4zhibiao的博客
08-14 2990
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My J
bootstrap拖动div_JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
weixin_39620653的博客
12-22 429
var i_statuindex = 0;var arrdata =[];var m_oTable = null;$(function () {//1.初始化表格m_oTable = newTableInit();m_oTable.Init();//2.初始化按钮事件var oButtonInit = newButtonInit();oButtonInit.Init();//3.日期控件的初始化$...
bootstrap模态框实现拖拽效果
08-31
主要为大家详细介绍了bootstrap模态框实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实战指南：基于Java实现高效拖拽功能的详细教程
最新发布
xiabin_2020的博客
07-04 256
在现代软件开发中，拖拽功能已成为提升用户体验的重要一环，尤其在桌面应用、图形界面编辑器等场景中尤为关键。本文旨在通过详细步骤和代码示例，为Java开发者提供一套完整的基于Java实现拖拽功能的解决方案。
bootstrap-table（七）拖拽排序
天空影
03-21 8468
需求 这个需求是今天下午老大艾特我发的一张图片 因为我们产品后台有一个组织的模块，其中就因为客户多次提示能不能做排序功能，所以老大就直接截图让我能不能做成钉钉这个样子，然后因为我用到的表格是bootstrap-table,所以我就去网上找了一下，发现在bootstrap-tbale扩展上有一个拖拽的功能库。所以也是花了点时间做到了老大要的效果。 效果 调整排序前 点击调整排序后 然后就可以随...
bootstrap table拖拽
Chris__wang的博客
09-07 2669
项目需要实现bootstrap 表格拖拽，从而进行表格重新排序 由于网上很多文档，不管是什么文档，好多都是写的不详细，所以导致无用的文档特别多，所以我尽量写的详细点 正文： 先上效果图 需要引入的文件 有的地方也叫   jquery.tablednd.js，当然肯定要基于jquery 和bootstrap table，把该引进的css,js都引入，然后引入插件，本人用的是...
boostrap table 拖拽排序
shijianshenchu的博客
05-15 1088
1、引用文件 在基础表格的情况下，添加。3.js添加变量、设置项和事件。2.为dom添加属性。
js、jquery、Bootstrap实现拖拽上传文件
feifei9989的博客
03-13 1105
js、jquery、Bootstrap实现拖拽上传文件（后续还需要再完善进度条等
bootstrap模态框实现拖拽
咕咕鸡的博客
12-14 4574
bootstrap modal模态框实现拖拽
集成vue到jquery/bootstrap项目的方法
10-18
下面小编就为大家分享一篇集成vue到jquery/bootstrap项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于 jQuery/Bootstrap开发的响应式企业门户网站
04-26
负责网站的整体布局与交互效果， 响应式网站（兼容PC-平板-...实现了商品搜索、社会分享功能、在线咨询、表单验证， 是一个功能完整的公司门户网站。 演示地址------- 马克森橱柜:http://zhangningle.gitee.io/makesen/
jQuery+bootstrap可视化表单拖拽编辑，自定义拖拽设计表单
02-26
demo在线预览：http://124.223.118.176/dragForm/ 代码简介：jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单，可自定义拖拽控制生成表单，预览表单，表单各种属性可通过json格式的配置来处理控制表单的各个属性，看起来非常的高大上，代码配置风格也是很前沿，如果你对拖拽生成自定义表单感兴趣，可以在其基础上进行更大的拓展和完善，真的完全有可能升级作为一款智能前端开发产品，其实市场上已经有类似的收费产品，例如avue,这款demo跟avue拖拽表单很像。
基于bootstrap做的表单拖拽生成器.rar
09-16
基于bootstrap做的form表单生成器，拖拽式生成表单组件，实战运用于项目的插件。如果基于html做表单生成功能可下载。
使用bootstrapValidator插件进行动态添加表单元素并校验
09-01
在本文中，我们将探讨如何使用bootstrapValidator插件在动态添加表单元素时进行实时校验。Bootstrap Validator是一款强大的前端验证工具，它允许开发者方便地为HTML表单添加各种验证规则，提升用户体验。在某些场景...
jQuery/Bootstrap实现个性化Tab菜单插件
08-23
之前我们分享过许多外观漂亮而且非常实用的jQuery Tab菜单插件，比如HTML5 SVG Tab滑块菜单和CSS3/jQuery实现Tab菜单小工具都是非常不错的Tab菜单插件。今天我们再分享一款基于jQuery和Bootstrap的个性化Tab菜单插件...
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
Bootstrap Table的拖拽
weixin_45771336的博客
11-09 1411
从网上百度的资源大都需要积分真是太烦了，博主直接将文件写在帖子里了！tablednd.js bootstrap-table-reorder-rows.js
bootstrap-table实现 行拖拽 的简单操作
tianbinve3363的博客
11-08 3257
引用 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css文件链接地址https://download.csdn.net/download/tianbinve3363/10770424 拖拽前原始表 拖拽使用后 代码如下,写在cshtml文件里,&lt;table&g...
bootstrap之Drag
doctorq
07-18 3522
Drag package io.appium.android.bootstrap.handler; import com.android.uiautomator.core.UiDevice; import com.android.uiautomator.core.UiObjectNotFoundException; import io.appium.android.bootstrap.
jquery获取bootstrap表单的数据
05-25
可以使用 jQuery 的 `serialize()` 方法来获取 Bootstrap 表单的数据。这个方法将表单中所有的输入元素的数据序列化为一个字符串，可以直接作为 AJAX 请求的参数或者表单提交的数据。 以下是一个示例代码： ```html <form id="myForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name"> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" name="email"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` ```javascript $('#myForm').submit(function(event) { event.preventDefault(); var formData = $(this).serialize(); console.log(formData); // 输出表单数据 // 发送 AJAX 请求或者表单提交 }); ``` 在上面的示例代码中，我们使用了 jQuery 的 `submit()` 方法来捕获表单的提交事件，然后使用 `serialize()` 方法获取表单数据，并在控制台输出。注意：要阻止表单的默认提交行为，需要调用 `event.preventDefault()` 方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值