jquery+bootstrap实现一个拖拽式表单生成预览效果代码
代码语言：html
所属分类：表单美化
代码描述：jquery+bootstrap实现一个拖拽式表单生成预览效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
.controlName{
width: 80%;
float: left;
padding: 5px;
border: 1px solid #ededed;
margin-bottom: 20px;
border-radius: 2px;
color: #777;
}
.interval{
width:96%;
margin: 0 2%;
padding: 0 2%;
background: #ffffff;
float: left;
/* overflow-y: auto;
overflow-x: hidden; */
}
.controlImgName{
width: 20px;
float: left;
height: 20px;
overflow: hidden;
position: relative;
}
.controlImgName img{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.controlRealName{
float: left;
font-size: 14px;
}
.controlName:hover{
color:#0377ed;
cursor: pointer;
border: 1px solid #0377ed;
}
.mainbackground{
}
.questionnaireTitle{
text-align: center;
font-size: 18px;
}
.questionnaireSubject{
width:100%;
padding: 0px 10px;
float: left;
position: relative;
height: 100%;
overflow: auto;
}
.questionnaireItemHead{
width: 90%;
float: left;
line-height: 40px;
height: 44px;
margin-left: 5%;
}
.questionnaireItemName{
float: left;
width: 60%;
}
.questionnaireItemGroupButton{
float: right;
}
.questionnaireItemGroupButton button{
margin-left: 5px;
}
.questionnaireItemContent{
width: 90%;
float: left;
margin-left: 5%;
margin-bottom: 20px;
}
.checkMargin{
margin-top: 7px;
}
.selectInputDiv{
display:none;
border: 1px solid #ccc;
width: 92%;
padding: 4px 6px;
box-shadow: 1px 1px 0px 0px #ccc;
position: absolute;
z-index: 10000;
background: #fff;
overflow:auto;
}
.selectInputDiv p{
margin-bottom: 0px;
padding: 0.5rem 0;
}
.selectInputDiv p:hover{
background: #0377ed;
color:#fff;
}
.full{
width: 100%;
float: left;
}
.z_photo {
padding: 5px;
border: 1px dashed #E7E6E6;
}
.z_file {
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
}
.add-img{
display: block;
width: 120px;
height: 120px;
}
.imgFile{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.imgExplain{
font-size:12px;
color:#888;
float:left;
}
.errerClass {
display: none;
float: left;
font-size: 14px;
color: #ff0000;
}
.message{
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.message .input {
width: 70%;
float: left;
}
.message .liulan {
width: 30%;
height: 38px;
padding: 4px 6px;
background: url(//repo.bfw.wiki/bfwrepo/icon/5d835147aa4b2.png)left center no-repeat;
background-size: cover;
text-indent: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
}
.message .files {
position: absolute;
left: 0px;
top: 0px;
cursor: pointer;
filter: Alpha(opacity=0);
opacity: 0;
display: none;
}
.fileTips {
float: left;
}
.fileTips p {
color: #888!important;
font-size: 12px!important;
margin: 0px!important;
}
.questionnaireAttribute{
display: none;
width: 96%;
margin: 0 2%;
padding: 0 2%;
float: left;
position: relative;
}
.textRegularCustom{
display: none;
}
.placeLocationTop{
border-top:1px solid #22aaff;
}
.placeLocationBottom{
border-bottom:1px solid #22aaff;
}
.questionnaireItem{
width:100%;
}
.required{
float:left;
color:#f00;
}
.requiredHiddle{
display: none;
}
.previewMain{
position: absolute;
width: 800px;
height: 600px;
display: none;
margin: 0 auto;
border: 1px solid #000;
background: #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.errorMain{
line-height: 40px;
height: 40px;
overflow: hidden;
color: #f00;
width: 100%;
}
.hidMargin{
margin-bottom:0px!important;
}
.z_fileImgDel{
position: absolute;
width: 100%;
text-align: center;
background: #000;
opacity: 0.7;
color: #fff;
bottom: 0px;
z-index: 101;
}
.messagedel{
position: absolute;
z-index: 101;
width: 120px;
height: 100%;
text-align: center;
line-height: 38px;
background: #000;
opacity: 0.5;
color: #fff;
display: none;
right: 30%;
}
.priviewbtn,.getcode{
background: 000;
cursor: pointer;
margin: 20px;
text-align: center;
border: 1px solid grey;
}
</style>
</head>
<body style="height: 100%;position: fixed;width: 100%;">
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/popper-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
<script>
//-----------------------------------------初始化方法及页面加载方法-------------------------------------------
function Initialization(name) {
//先清除对应div中的html代码
$(name).empty();
var main = '<div class="container-fluid" style="background:#edededa1;"><div class="row">';
main += leftToolbar();
main += centerMain();
main += rightAttribute();
main += '</div></div><div class="dragControl"></div>';
main += '<div class="previewMain"></div>';
//添加基本的界面布局
$(name).append(main);
$(".interval").css("height",document.body.offsetHeight+"px");//初始化高度，跟浏览器可视高度一致
}
//左侧工具栏
function leftToolbar() {
//<!--左侧工具栏-->
var str = '<div class="col-lg-3 mainbackground">';
str += '<div class="interval">';
str += '<p class="questionnaireTitle">工具栏</p><div class="priviewbtn">预览</div><div class="getcode">获取代码</div>';
str += '<div class="row">';
//文本框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="text">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">文本框</div>';
str += '</div></div>';
//多行文本框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="multiple">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">多行文本框</div>';
str += '</div></div>';
//时间框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="date">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">时间框</div>';
str += '</div></div>';
//单选框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="radio">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">单选框</div>';
str += '</div></div>';
//复选框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="checkbox">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">复选框</div>';
str += '</div></div>';
//下拉框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="dropdown">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">下拉框</div>';
str += '</div></div>';
//文本下拉框
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="textdropdown">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">文本下拉框</div>';
str += '</div></div>';
//图片上传
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="img">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">图片上传</div>';
str += '</div></div>';
//文件上传
str += '<div class="col-lg-6">';
str += '<div class="controlName" data-type="file">';
//str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>';
str += '<div class="controlRealName">文件上传</div>';
str += '</div></div>';
str += '</div></div></div>';
return str;
}
//中部控件主体
function centerMain() {
//<!--中间内容区域-->
var str = '<div class="col-lg-6 mainbackground ">';
str += '<div class="interval centerMain">';
str += '<p class="questionnaireTitle tableTitle">新建调查问卷</p>';
//<!--主体部分-->
str += '<div class="questionnaireSubject">';
str += '<form class="questionnaireSubjectForm"></form>';
str += '</div></div></div>';
return str;
}
//右侧属性栏
function rightAttribute() {
//<!--右侧属性框-->
var str = '<div class="col-lg-3 mainbackground">';
str += '<div class="interval">';
str += '<p class="questionnaireTitle">属性栏</p>';
//<!--文本属性-->
str += '<div class="questionnaireAttribute" data-type="text"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="text" class="form-control textDetailsName"> </div> <div class="form-group"> <label>限制</label> <select class="form-control limitSelect"> <option value="">无</option> <option value="'+numberRegExp+'">数字</option> <option value="'+ letterRegExp +'">字母</option> <option value="'+chineseRegExp+'">中文</option> <option value="'+emailRegExp+'">邮箱</option> <option value="'+mobileRegExp+'">手机号</option> <option value="'+idRegExp+'">身份证</option> <option value="auto">自定义</option> </select> <input type="text" class="form-control textRegularCustom" name="" placeholder="请输入正则表达式"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--多行文本属性-->
str += '<div class="questionnaireAttribute" data-type="multiple"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="text" class="form-control textDetailsName"> </div> <div class="form-group"> <label>高度</label> <input type="number" class="form-control multipleHeight"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--时间属性-->
str += '<div class="questionnaireAttribute" data-type="date"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="date" class="form-control textDetailsName"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--单选属性-->
str += '<div class="questionnaireAttribute" data-type="radio"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>单选框选项（一行一个选项）</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--复选属性-->
str += '<div class="questionnaireAttribute" data-type="checkbox"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>复选框选项（一行一个选项）</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--下拉框属性-->
str += '<div class="questionnaireAttribute" data-type="dropdown"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>下拉框选项（一行一个选项）</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--文本下拉框属性-->
str += '<div class="questionnaireAttribute" data-type="textdropdown"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>文本下拉框选项（一行一个选项）</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>';
//<!--图片框属性-->
str += '<div class="questionnaireAttribute" data-type="img"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>上传数量</label> <input type="number" class="form-control uploadNum"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div> ';
//<!--文件框属性-->
str += '<div class="questionnaireAttribute" data-ty.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0