用于拖拽放置的前端代码
用于拖拽放置的前端代码
<!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>
