首页 > 其他分享 >用于拖拽放置的前端代码

用于拖拽放置的前端代码

时间：2022-11-29 16:56:12浏览次数：38  
标签：function area edit 前端 page html let 放置 拖拽

用于拖拽放置的前端代码

<!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>

　　

标签：function,area,edit,前端,page,html,let,放置,拖拽
From： https://www.cnblogs.com/xhrs/p/16935859.html

相关文章

  • Vue 前端解析 Excel 数据
    想要在前端实现Excel表格数据的解析，需要安装xlsx包：npminstallxlsx然后在需要使用的地方引入：import*asXLSXfrom'xlsx/xlsx.mjs'使用ElementUI提供......
  • 【前端工程化】使用Nexus 搭建前端 npm 私服
    参考文献1-https://blog.51cto.com/lookingdream/3609619参考文献2- https://blog.csdn.net/u013278374/article/details/120937712......
  • 我现在在用的前端Web框架或插件
    CSS3动画代码大合集（好用）：​​http://www.webhek.com/css3-animation-sniplet-collection?ref=myread#/​​Boostrap 前端框架：​​http://v3.bootcss.com/getting-started/......
  • 写一份gulp常用配置文件，构建前端工作流
    目录​​目录​​​​前言​​​创建项目​​​初始化项目​​​​创建目录结构​​​编写Gulp配置​​​创建gulp的config文件​​​​创建gulp的dev文件​​​​创建gulp......
  • 前端Sass回顾以及Compass入门小记
    目录​​目录​​​​前言​​​​下载安装​​​SASS语法核心回顾​​​变量及使用​​​​import语法​​​​函数​​​​Sass中的media​​​​at-root​​​Compass的......
  • 聊聊前端图片的格式和优化
    前言在当前的web开发过程中,图片的使用是一种重要的功能本期就来聊聊,开发中的图片以及我们如何优化图片图片的类型以及对比位图位图的特点是可以表现色彩的变化......
  • Swift基础之仿资讯类实现频道的长按拖拽／删除／增加
    导读简单用Swift写了一个collectionview的拖拽点击排序效果;拖拽排序是新闻类的App可以说是必有的交互设计，如今日头条，网易新闻等。效果效果主要代码手势长按移动1.......
  • #yyds干货盘点#前端工作的一点思考
    为什么选择前端？一个简单的问题，但大部分人却说不清楚，我当初也是误打误撞进入了这个行业，不知不觉就干了快七年。漫无目的的做一件事情是很难做好的，也是痛苦的，尤其是这件事还占......
  • 前端知识点概览
    0、底层EventLoop事件循环：就是一个执行消息队列的机制宏任务微任务为了解决这种情况，将任务分为了同步任务和异步任务；而异步任务被分为两种,一种宏任务（MacroTask）,一种......
  • 基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一
    在工作流页面中，除了特定的业务表单信息外，往往也需要同时展示通用申请单的相关信息，因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理，本篇随笔介绍Vue3......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99