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">
                                <lab.........完整代码请登录后点击上方下载按钮下载查看

网友评论0