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"> <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