jquery bootstrap拖拽生成表单元素代码-html代码-BFW代码库

jquery bootstrap拖拽生成表单元素代码

代码语言：html

代码描述：jquery+bootstrap实现拖拽左侧表单元素至右侧区域生成自定义代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <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">
                                <lab.........完整代码请登录后点击上方下载按钮下载查看