dwz_jui
/
miscDragScreen1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>

	<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="all"/><link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>

	<!--[if IE]>
	<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
	<![endif]-->

	<!--[if lt IE 9]><script src="js/speedup.js" type="text/javascript"></script><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><![endif]-->
	<!--[if gte IE 9]><!--><script src="js/jquery-2.1.4.js" type="text/javascript"></script><!--<![endif]-->


	<script src="js/dwz.core.js" type="text/javascript"></script>
	<script src="js/dwz.drag.js" type="text/javascript"></script>
	<script src="js/dwz.sortDrag.js" type="text/javascript"></script>
	<script src="js/dwz.miscDrag.js" type="text/javascript"></script>

	<!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)
	<script src="bin/dwz.min.js" type="text/javascript"></script>
	-->
	<script src="js/dwz.regional.zh.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(function(){
			DWZ.init("dwz.frag.xml", {
				loginUrl:"login_dialog.html", loginTitle:"登录",	// 弹出登录对话框
//		loginUrl:"login.html",	// 跳到登录页面
				statusCode:{ok:200, error:300, timeout:301}, //【可选】
				pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
				keys: {statusCode:"statusCode", message:"message"}, //【可选】
				ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式，支持的值有’display’，’offsets’负数偏移位置的值，默认值为’display’
				debug:false,	// 调试模式 【true|false】
				callback:function(){
					$("dl.miscSortDrag").miscSortDrag();
					$("div.sortDrag").sortDrag();
				}
			});

		});

	</script>

	<link href="themes/miscDrag/screen.css" rel="stylesheet" type="text/css" media="all"/>
	<style type="text/css">
		html,body { height:auto; overflow-y: auto; background: none}
	</style>
</head>

<body>

<div class="page unitBox">
	<!--<h2 class="contentTitle">炉门 Furnace door</h2>-->
	<!-- start自定义拖拽示例 -->
	<div class="pageContent" style="padding: 10px;">


		<dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag" data-duplicate="1">
			<dt>
				<fieldset>
					<legend>显示单元(Element)</legend>
					<div class="itemBox">
						<div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-32" data-name="样板间1噪音">样板间1噪音<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-33" data-name="样板间2噪音">样板间2噪音<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>

						<div class="dragItem" data-sn="element-41" data-name="样板间1温度">样板间1温度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-42" data-name="样板间1湿度">样板间1湿度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-51" data-name="样板间1照度">样板间1照度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
						<div class="dragItem" data-sn="element-61" data-name="样板间1风速">样板间1风速<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
					</div>
				</fieldset>

			</dt>
			<dd>
				<fieldset>
					<legend>屏幕布局配置(Screen)</legend>
					<div class="row" style="padding: 0 10px;">
						<div class="col-lg-4 col-md-12 col-sm-12">
							<p class="title">空气质量(Panel)</p>
							<div class="sortDrag" data-sn="panel-1" data-name="空气质量" data-over-sort="false">
								<div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
								<div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
								<div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
							</div>

							<p class="title">热舒适度(Panel)</p>
							<div class="sortDrag" data-sn="panel-6" data-name="热舒适度">
							</div>
						</div>
						<div class="col-lg-4 col-md-6 col-sm-12">
							<p class="title">水质(Panel)</p>
							<div class="sortDrag" data-sn="panel-2" data-name="水质" data-over-sort="false">
								<div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
								<div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
							</div>

							<p class="title">风速(Panel)</p>
							<div class="sortDrag" data-sn="panel-4" data-name="风速" data-over-sort="false">
							</div>
						</div>
						<div class="col-lg-4 col-md-6 col-sm-12">
							<p class="title">噪音(Panel)</p>
							<div class="sortDrag" data-sn="panel-3" data-name="噪音">
							</div>

							<p class="title">照度(Panel)</p>
							<div class="sortDrag" data-sn="panel-5" data-name="照度" data-over-sort="false">
							</div>
						</div>

					</div>
				</fieldset>
			</dd>

		</dl>


		<button type="button" onclick="alert( JSON.stringify($('#myMiscSortDrag').miscSortDragData()) )">获取数据</button>


	</div>
	<!-- end自定义拖拽示例 -->

</div>

</body>
</html>