jquey+bootstrap实现表单拖拽并设置属性生成表单json数据代码-html代码-BFW代码库

代码语言：html

代码描述：jquey+bootstrap实现表单拖拽并设置属性生成表单json数据代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <title>拖拽表单</title>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2716841_5q133u7t0gp.css" />

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
    <style>
        .controlRealName i {
    	margin-right: 3px;
    }
    .controlName {
    	width: 48%;
    	float: left;
    	padding: 5px;
    	border: 1px solid #ededed;
    	margin: 0 1% 20px 1%;
    	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: move;
    	border: 1px solid #0377ed;
    }
    .LdgFormTitle {
    	text-align: center;
    	font-size: 18px;
    }
    .LdgFormSubject {
    	width: 100%;
    	padding: 0px 10px;
    	float: left;
    	position: relative;
    	height: 100%;
    	overflow: auto;
    	background-color: #fff;
    }
    .LdgFormItemHead {
    	padding: 7px 6px;
    	width: 100%;
    }
    .LdgFormItemContent .checkbox,
    .LdgFormItemContent .checkbox-inline,
    .LdgFormItemContent .radio,
    .LdgFormItemContent .radio-inline {
    	padding-top: 7px;
    	margin-top: 0;
    	margin-bottom: 0;
    }
    .LdgFormItemName {
    	float: left;
    }
    .LdgFormItemGroupButton {
    	position: absolute;
    	right: 0;
    	bottom: 0;
    }
    .LdgFormItemGroupButton i {
    	margin-left: 2px;
    	background-color: #22aaff;
    	padding: 5px;
    	color: white;
    	cursor: pointer;
    }
    .LdgFormItemGroupButton i.controlMove {
    	cursor: move;
    }
    .LdgFormItemID {
    	background-color: #22aaff;
    	color: white;
    	padding: 2px;
    	margin-right: 5px;
    }
    .LdgFormItemContent {
    	width: 100%;
    }
    .LdgFormItemContent::before,
    .LdgFormItemContent::after {
    	display: table;
    	content: '';
    }
    .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(images/file.png) left center no-repeat;
    	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;
    }
    .LdgFormButton {
    	border-bottom: 1px solid #e7e6e6;
    	padding: 5px;
    	margin-bottom: 5px;
    }
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
    	outline: none;
    	box-shadow: none;
    }
    
    .LdgFormAttribute,
    .LdgFormConfigs,
    .LdgFormControls {
    	width: 96%;
    	margin: 0 2%;
    	padding: 0 2%;
    	float: left;
    	position: relative;
    	overflow-y: auto;
    	overflow-x: hidden;
    }
    .textRegularCustom {
    	display: none;
    }
    .placeLocationTop {
    	border-top: 3px solid #22aaff;
    }
    .placeLocationBottom {
    	border-bottom: 3px solid #22aaff;
    }
    .LdgFormItem {
    	width: 100%;
    }
    .required {
    	float: left;
    	color: #f00;
    	margin: 0 2px;
    }
    .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%;
    	display: none;
    }
    .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%;
    }
    .LdgFormTitle {
    	border-bottom: 1px solid #e7e6e6;
    	padding: 5px;
    	margin-bottom: 5px;
    }
    .LdgDiyForm {
    	border: 2px solid #e7e6e6;
    }
    .LdgDiyForm,
    .LdgDiyForm > div {
    	height: 100%;
    	position: relative;
    }
    .LdgDiyForm > div:nth-child(1) {
    	background-color: #fff;
    	width: 250px;
    	float: left;
    	border-right: 1px solid #e7e6e6;
    }
    .LdgDiyForm > div:nth-child(2) {
    	width: calc(100% - 254px);
    	margin-left: 250px;
    	padding: 4px;
    	position: absolute;
    }
    .LdgDiyForm > div:nth-child(3),
    .LdgDiyForm > div:nth-child(4) {
    	display: none;
    	border-left: 1px solid #e7e6e6;
    }
    
    .hasProperties.LdgDiyForm > div:nth-child(2) {
    	width: calc(100% - 504px);
    	position: absolute;
    }
    .hasProperties.LdgDiyForm > .showAttr {
    	/*div:nth-child(3)*/
    	background-color: #fff;
    	width: 250px;
    	float: right;
    	display: flex;
    	flex-direction: column;
    }
    
    .LdgFormSubjectForm .row {
    	margin: 3px auto;
    }
    .ldgPrew .LdgFormItem {
    	border: rgb(25, 178, 238) 1px dashed;
    	background-color: rgba(236, 245, 255, 0.3);
    	padding: 3px;
    	position: relative;
    }
    .ldgLeft .LdgFormItemHead,
    .ldgRight .LdgFormItemHead {
    	width: 100px;
    }
    .ldgLeft .LdgFormItem,
    .ldgRight .LdgFormItem {
    	width: 100%;
    	display: flex;
    }
    
    .ldgLeft .LdgFormItemContent {
    	float: left;
    }
    .ldgRight .LdgFormItemName {
    	float: right;
    }
    .ldgRight .required {
    	float: right;
    }
    </style>
</head>

<body style="height: 100%; position: fixed; width: 100%">
  
    <div id="app"></div>
    <script>
        //-----------------------------------------全局变量-------------------------------------------
    var mouseX //鼠标的位置
    var mouseY //鼠标的位置
    var controlHtml //被选中的控件
    var isCanBePlaced = false //是否可以放置
    var isDownContr.........完整代码请登录后点击上方下载按钮下载查看