用于拖拽放置的前端代码()

用于拖拽放置的前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>后台</title>
	<link rel="stylesheet" href="/static/layui/css/layui.css">
	<script src="/static/jquery-1.11.3.min.js"></script>
	<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.css">
	<script src="/static/echarts.min.js"></script>
	
	<style type="text/css">
		.layui_tool{height:50px;box-shadow:0px 0px 10px -5px #333;padding:10px 10px 10px 10px}
		.edit_page{position:relative;height:1200px;width:100%}
		.edit_page .box_area{position:absolute;left:0px;top:0px;z-index:1;box-shadow:0px 0px 5px -2px #333}
		.edit_page .box_area .drag{height:45px;}
		.edit_page .box_area .drag .drag_ico{float:left;height:45px;width:45px;cursor:move;line-height:35px;text-align:center;}
		.edit_page .box_area .drag .del_ico{float:right;height:45px;width:45px;cursor:pointer;line-height:35px;text-align:center;}
		.edit_page .box_area .html_area{padding:5px}
		.edit_page .btn_select select{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;}
		.page_echart .html_area textarea{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;min-width:400px;height:50px;margin-top:5px}
		.page_echart .page_echart_area{height:320px;width:450px;}
		.btn_textarea textarea{width:250px;}
		.layui-progress{width:300px;}
		.layui-form-label{width:170px}
		.layui-form-item{margin-bottom:0px}
		.layui-form-item .layui-input-inline{margin:0px;}
		.script_echart_area{display:none;}
		.sucai{display:none;}
	</style>
</head>
<body>
<div class="layui_tool">
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yulang(this)" style="background:#009688;color:#fff">预览</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_xs()">迷你按钮</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_sm()">小型按钮</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_upload()">上传文件</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_text()">单行输入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_textarea()">多行输入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_date()">日期选择</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_time()">时间选择</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="pagetxt()">网页纯文本</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_checkbox()">复选框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_select()">下拉框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_blockquote()">提示条</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_progress_bar()">进度条</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_timeline()">常规时间线</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_echart()">数据可视化</button>

	

	
</div>
<div class="edit_page"></div>
<div class="sucai">
	<div class="box_area btn_xs">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-xs contenteditable" contenteditable="true">迷你按钮</button>
		</div>
	</div>
	<div class="box_area btn_sm">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-sm contenteditable" contenteditable="true">小型按钮</button>
		</div>
	</div>
	<div class="box_area btn_input_text">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-form-item">
				<label class="layui-form-label contenteditable" contenteditable="true">单行输入框</label>
				<div class="layui-input-inline">
					<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_date">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">日期选择</label>
				<div class="layui-input-inline">
					<input type="date" class="layui-input" placeholder="yyyy">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_time">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">时间选择</label>
				<div class="layui-input-inline">
					<input type="time" class="layui-input" placeholder="HH:ss">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area pagetxt">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">网页纯文本</div>
	</div>
	<div class="box_area btn_checkbox">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area" style="text-align:center;"><input type="checkbox" name="" title=""></div>
	</div>
	<div class="box_area btn_select">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<select>
						<option>#value#</option>
					</select>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_textarea">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">多行输入框</label>
				<div class="layui-input-inline">
					<textarea placeholder="请输入" class="layui-textarea"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area page_blockquote">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<blockquote class="layui-elem-quote  contenteditable" contenteditable="true">长按空格可增加长度</blockquote>
		</div>
	</div>
	<div class="box_area page_progress_bar">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-progress layui-progress-big" lay-showpercent="true">
				<div class="layui-progress-bar" lay-percent="#value#" style="width:#value#;"><span class="layui-progress-text">#value#</span></div>
			</div>
		</div>
	</div>
	<div class="box_area page_timeline">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">
			<ul class="layui-timeline">
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">01月01日</h3>
					<p>
					  1、复制的时候要连球型的图标也一起复制进去
					  <br>2、在这段文本的最末端回车换行然后粘贴就可以,是这段文本而不是最后面的文本
					</p>
				  </div>
				</li>
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<div class="layui-timeline-title">过去</div>
				  </div>
				</li>
			</ul>  
		</div>
	</div>
	<div class="box_area page_upload">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<label>
						<u>#value#</u>
						<input type="file" style="display:none"/>
					</label>
					
				</div>
			</div>
		</div>
	</div>

	<div class="box_area page_echart">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div id="container_#value#" class="page_echart_area"></div>
			#script#
		</div>
	</div>
	
</div>
<textarea class="script_echart_area">
var dom = document.getElementById('#id_name#');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false,
});
var app = {};
var option;
#script#
if (option && typeof option === 'object') {
	myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</textarea>

<div class="css_area"></div>
<script src="/static/layui/layui.all.js"></script>
<script>
page_is_edit=1;
function yulang(this_obj){
	if(page_is_edit==1){
		$(this_obj).html('编辑');
		let css_area = '<style>.edit_page .box_area .drag *{display:none;}.edit_page .box_area{box-shadow:none}</style>';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':false});
		});
		page_is_edit=0;
	}else{
		$(this_obj).html('预览');
		let css_area = '';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':true});
		});
		page_is_edit=1;
	}
	
}
//迷你按钮
function btn_xs(){
	let html = $('.sucai .btn_xs').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//小型按钮
function btn_sm(){
	let html = $('.sucai .btn_sm').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//单行输入框
function btn_input_text(){
	let html = $('.sucai .btn_input_text').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//日期选择
function btn_input_date(){
	let html = $('.sucai .btn_input_date').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//时间选择
function btn_input_time(){
	let html = $('.sucai .btn_input_time').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//网页纯文本
function pagetxt(){
	layer.msg('纯文本不仅可以放文本还可以直接粘贴Word中的内容');
	let html = $('.sucai .pagetxt').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//复选框
function btn_checkbox(){
	let html = $('.sucai .btn_checkbox').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//下拉框
function btn_select(){
	layer.prompt({title: '请输入默认值', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .btn_select').prop("outerHTML");
		html = html.replace('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}
//多行输入框
function btn_textarea(){
	let html = $('.sucai .btn_textarea').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//提示条
function page_blockquote(){
	let html = $('.sucai .page_blockquote').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//进度条
function page_progress_bar(){
	layer.prompt({title: '请输入1到100之间的数字', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_progress_bar').prop("outerHTML");
		html = html.replaceAll('#value#',pass+'%');
		$('.edit_page').append(html);
		on_action();
	});
}
//提示条
function page_timeline(){
	let html = $('.sucai .page_timeline').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//上传文件
function page_upload(){
	layer.prompt({title: '请输入文本', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_upload').prop("outerHTML");
		html = html.replaceAll('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}



//数据可视化
function page_echart(){
	layer.prompt({title: '请输入代码', formType:2, maxlength:9999}, function(codes, index){
		layer.close(index);
		let html = $('.sucai .page_echart').prop("outerHTML");//复制素材
		let idname =  Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1);//生成class名
		html = html.replaceAll('#value#',idname);//替换class名
		html = html.replaceAll('#script#','<div class="script_code_area"></div>');//替换标签
		$('.edit_page').append(html);
		run_echart(codes,idname);
		on_action();
	});
}
//生成视图
function run_echart(script_code,id_name){
	let temp_script_code= $('.script_echart_area').val();//公共js代码存放的容器

	temp_script_code = temp_script_code.replaceAll('#id_name#','container_'+id_name);
	temp_script_code = temp_script_code.replaceAll('#script#',script_code);
	console.log(temp_script_code);
	eval(temp_script_code)
	$('#container_'+id_name).next(".script_code_area").html("<script>"+temp_script_code+"<\/script>");//写入代码
}



$(".drag_ico").mousedown(function(){
	$(this).parent().parent().mousemove(function(event){
		$(this).css({"top":event.pageY-85,"left":event.pageX-15});
	});
});
$(".drag_ico").mouseup(function(){
	$(this).parent().parent().unbind('mousemove');//移除鼠标移动事件
});
$(".del_ico").click(function(){
	$(this).parent().parent().remove();//移除元素
});
$(".box_area").mouseleave(function(){
	$(this).unbind('mousemove');//移除鼠标移动事件
});
$(".box_area").mousedown(function(){
	$(".box_area").each(function(){
		$(this).css("z-index",1);
	});
	let ceng = Number($(this).css("z-index"))+1;
	$(this).css("z-index",ceng);
});

function on_action(){
	$(".drag_ico").on("mousedown",function(){
		$(this).parent().parent().mousemove(function(event){
			$(this).css({"top":event.pageY-85,"left":event.pageX-15});
		});
	});
	$(".drag_ico").on("mouseup",function(){
		$(this).parent().parent().unbind('mousemove');//移除鼠标移动事件
	});
	$(".box_area").on("mouseleave",function(){
	  $(this).unbind('mousemove');//移除鼠标移动事件
	});
	$(".del_ico").on("click",function(){
		$(this).parent().parent().remove();//移除元素
	});
	$(".box_area").on("mousedown",function(){
		$(".box_area").each(function(){
			$(this).css("z-index",1);
		});
		let ceng = Number($(this).css("z-index"))+1;
		$(this).css("z-index",ceng);
	});
}
</script>
</body>
</html>
————————

用于拖拽放置的前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>后台</title>
	<link rel="stylesheet" href="/static/layui/css/layui.css">
	<script src="/static/jquery-1.11.3.min.js"></script>
	<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.css">
	<script src="/static/echarts.min.js"></script>
	
	<style type="text/css">
		.layui_tool{height:50px;box-shadow:0px 0px 10px -5px #333;padding:10px 10px 10px 10px}
		.edit_page{position:relative;height:1200px;width:100%}
		.edit_page .box_area{position:absolute;left:0px;top:0px;z-index:1;box-shadow:0px 0px 5px -2px #333}
		.edit_page .box_area .drag{height:45px;}
		.edit_page .box_area .drag .drag_ico{float:left;height:45px;width:45px;cursor:move;line-height:35px;text-align:center;}
		.edit_page .box_area .drag .del_ico{float:right;height:45px;width:45px;cursor:pointer;line-height:35px;text-align:center;}
		.edit_page .box_area .html_area{padding:5px}
		.edit_page .btn_select select{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;}
		.page_echart .html_area textarea{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;min-width:400px;height:50px;margin-top:5px}
		.page_echart .page_echart_area{height:320px;width:450px;}
		.btn_textarea textarea{width:250px;}
		.layui-progress{width:300px;}
		.layui-form-label{width:170px}
		.layui-form-item{margin-bottom:0px}
		.layui-form-item .layui-input-inline{margin:0px;}
		.script_echart_area{display:none;}
		.sucai{display:none;}
	</style>
</head>
<body>
<div class="layui_tool">
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yulang(this)" style="background:#009688;color:#fff">预览</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_xs()">迷你按钮</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_sm()">小型按钮</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_upload()">上传文件</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_text()">单行输入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_textarea()">多行输入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_date()">日期选择</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_time()">时间选择</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="pagetxt()">网页纯文本</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_checkbox()">复选框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_select()">下拉框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_blockquote()">提示条</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_progress_bar()">进度条</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_timeline()">常规时间线</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_echart()">数据可视化</button>

	

	
</div>
<div class="edit_page"></div>
<div class="sucai">
	<div class="box_area btn_xs">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-xs contenteditable" contenteditable="true">迷你按钮</button>
		</div>
	</div>
	<div class="box_area btn_sm">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-sm contenteditable" contenteditable="true">小型按钮</button>
		</div>
	</div>
	<div class="box_area btn_input_text">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-form-item">
				<label class="layui-form-label contenteditable" contenteditable="true">单行输入框</label>
				<div class="layui-input-inline">
					<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_date">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">日期选择</label>
				<div class="layui-input-inline">
					<input type="date" class="layui-input" placeholder="yyyy">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_time">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">时间选择</label>
				<div class="layui-input-inline">
					<input type="time" class="layui-input" placeholder="HH:ss">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area pagetxt">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">网页纯文本</div>
	</div>
	<div class="box_area btn_checkbox">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area" style="text-align:center;"><input type="checkbox" name="" title=""></div>
	</div>
	<div class="box_area btn_select">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<select>
						<option>#value#</option>
					</select>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_textarea">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">多行输入框</label>
				<div class="layui-input-inline">
					<textarea placeholder="请输入" class="layui-textarea"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area page_blockquote">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<blockquote class="layui-elem-quote  contenteditable" contenteditable="true">长按空格可增加长度</blockquote>
		</div>
	</div>
	<div class="box_area page_progress_bar">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-progress layui-progress-big" lay-showpercent="true">
				<div class="layui-progress-bar" lay-percent="#value#" style="width:#value#;"><span class="layui-progress-text">#value#</span></div>
			</div>
		</div>
	</div>
	<div class="box_area page_timeline">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">
			<ul class="layui-timeline">
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">01月01日</h3>
					<p>
					  1、复制的时候要连球型的图标也一起复制进去
					  <br>2、在这段文本的最末端回车换行然后粘贴就可以,是这段文本而不是最后面的文本
					</p>
				  </div>
				</li>
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<div class="layui-timeline-title">过去</div>
				  </div>
				</li>
			</ul>  
		</div>
	</div>
	<div class="box_area page_upload">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<label>
						<u>#value#</u>
						<input type="file" style="display:none"/>
					</label>
					
				</div>
			</div>
		</div>
	</div>

	<div class="box_area page_echart">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div id="container_#value#" class="page_echart_area"></div>
			#script#
		</div>
	</div>
	
</div>
<textarea class="script_echart_area">
var dom = document.getElementById('#id_name#');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false,
});
var app = {};
var option;
#script#
if (option && typeof option === 'object') {
	myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</textarea>

<div class="css_area"></div>
<script src="/static/layui/layui.all.js"></script>
<script>
page_is_edit=1;
function yulang(this_obj){
	if(page_is_edit==1){
		$(this_obj).html('编辑');
		let css_area = '<style>.edit_page .box_area .drag *{display:none;}.edit_page .box_area{box-shadow:none}</style>';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':false});
		});
		page_is_edit=0;
	}else{
		$(this_obj).html('预览');
		let css_area = '';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':true});
		});
		page_is_edit=1;
	}
	
}
//迷你按钮
function btn_xs(){
	let html = $('.sucai .btn_xs').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//小型按钮
function btn_sm(){
	let html = $('.sucai .btn_sm').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//单行输入框
function btn_input_text(){
	let html = $('.sucai .btn_input_text').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//日期选择
function btn_input_date(){
	let html = $('.sucai .btn_input_date').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//时间选择
function btn_input_time(){
	let html = $('.sucai .btn_input_time').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//网页纯文本
function pagetxt(){
	layer.msg('纯文本不仅可以放文本还可以直接粘贴Word中的内容');
	let html = $('.sucai .pagetxt').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//复选框
function btn_checkbox(){
	let html = $('.sucai .btn_checkbox').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//下拉框
function btn_select(){
	layer.prompt({title: '请输入默认值', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .btn_select').prop("outerHTML");
		html = html.replace('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}
//多行输入框
function btn_textarea(){
	let html = $('.sucai .btn_textarea').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//提示条
function page_blockquote(){
	let html = $('.sucai .page_blockquote').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//进度条
function page_progress_bar(){
	layer.prompt({title: '请输入1到100之间的数字', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_progress_bar').prop("outerHTML");
		html = html.replaceAll('#value#',pass+'%');
		$('.edit_page').append(html);
		on_action();
	});
}
//提示条
function page_timeline(){
	let html = $('.sucai .page_timeline').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//上传文件
function page_upload(){
	layer.prompt({title: '请输入文本', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_upload').prop("outerHTML");
		html = html.replaceAll('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}



//数据可视化
function page_echart(){
	layer.prompt({title: '请输入代码', formType:2, maxlength:9999}, function(codes, index){
		layer.close(index);
		let html = $('.sucai .page_echart').prop("outerHTML");//复制素材
		let idname =  Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1);//生成class名
		html = html.replaceAll('#value#',idname);//替换class名
		html = html.replaceAll('#script#','<div class="script_code_area"></div>');//替换标签
		$('.edit_page').append(html);
		run_echart(codes,idname);
		on_action();
	});
}
//生成视图
function run_echart(script_code,id_name){
	let temp_script_code= $('.script_echart_area').val();//公共js代码存放的容器

	temp_script_code = temp_script_code.replaceAll('#id_name#','container_'+id_name);
	temp_script_code = temp_script_code.replaceAll('#script#',script_code);
	console.log(temp_script_code);
	eval(temp_script_code)
	$('#container_'+id_name).next(".script_code_area").html("<script>"+temp_script_code+"<\/script>");//写入代码
}



$(".drag_ico").mousedown(function(){
	$(this).parent().parent().mousemove(function(event){
		$(this).css({"top":event.pageY-85,"left":event.pageX-15});
	});
});
$(".drag_ico").mouseup(function(){
	$(this).parent().parent().unbind('mousemove');//移除鼠标移动事件
});
$(".del_ico").click(function(){
	$(this).parent().parent().remove();//移除元素
});
$(".box_area").mouseleave(function(){
	$(this).unbind('mousemove');//移除鼠标移动事件
});
$(".box_area").mousedown(function(){
	$(".box_area").each(function(){
		$(this).css("z-index",1);
	});
	let ceng = Number($(this).css("z-index"))+1;
	$(this).css("z-index",ceng);
});

function on_action(){
	$(".drag_ico").on("mousedown",function(){
		$(this).parent().parent().mousemove(function(event){
			$(this).css({"top":event.pageY-85,"left":event.pageX-15});
		});
	});
	$(".drag_ico").on("mouseup",function(){
		$(this).parent().parent().unbind('mousemove');//移除鼠标移动事件
	});
	$(".box_area").on("mouseleave",function(){
	  $(this).unbind('mousemove');//移除鼠标移动事件
	});
	$(".del_ico").on("click",function(){
		$(this).parent().parent().remove();//移除元素
	});
	$(".box_area").on("mousedown",function(){
		$(".box_area").each(function(){
			$(this).css("z-index",1);
		});
		let ceng = Number($(this).css("z-index"))+1;
		$(this).css("z-index",ceng);
	});
}
</script>
</body>
</html>