<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./moveitem.css">
	</head>
	<body>
		<button onclick="openMoveItem()">克隆所有，在body元素中插入它们</button>
		<div id="moveitem" class="myMoveItem" style="top:10px;left:10px;">
			<div class="moveItem_header">
				<p class="moveItem_title" onselectstart="return false">标题1</p>
				<div class="moveItem_oper">
					<button type="button" class="moveItem_fullScreen"><></button>
					<button type="button" class="moveItem_normalScreen">><</button>
					<button type="button" class="moveItem_close">X</button>
				</div>
			</div>
			<div id="moveItem_body" class="moveItem_body" style="background-color: #FFF;height: calc(100% - 57px);">
				<p>测试1</p>
			</div>
			<span class="moveItem_resize"></span>
		</div>
		
		<div class="myMoveItem" style="top:150px;left:180px">
			<div class="moveItem_header">
				<p class="moveItem_title" onselectstart="return false">标题2</p>
				<div class="moveItem_oper">
					<button type="button" class="moveItem_fullScreen"><></button>
					<button type="button" class="moveItem_normalScreen">><</button>
					<button type="button" class="moveItem_close">X</button>
				</div>
			</div>
			<div class="moveItem_body">
				<p>测试2</p>
			</div>
			<div class="moveItem_footer">
				<button type="button" class="moveItem_do">确定</button>
				<button type="button" class="moveItem_cancel">取消</button>
			</div>
			<span class="moveItem_resize"></span>
		</div>

	</body>
	<script>
		function openMoveItem(){
			$("#moveItem_body").append("<p> 增加内容 </p>")
			$("#moveitem").show()
		}
	</script>
</html>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./moveitem.js" type="text/javascript" charset="utf-8"></script>
