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

代码语言:html

所属分类:表单美化

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

代码标签: jquery 拖拽 表单

下面为部分代码预览,完整代码请点击下载或在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">
                                <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>
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0