master

分支 (2)

标签 (3)

管理

管理

master

wiki

v1.6.0

v1.5.2

v1.5.1

dwz_jui
/
miscDrag2.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.12.4.js" type="text/javascript"></script><![endif]-->
	<!--[if gte IE 9]><!--><script src="js/jquery-3.4.1.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.ui.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>
	<script src="js/dwz.print.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.miscDrag").miscDrag();

					$("dl.miscSortDrag").miscSortDrag();
				}
			});

		});

	</script>

	<link href="themes/miscDrag/styles.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">

		<dl id="myMiscDrag" class="miscDrag" drag-rel="dd .door" rel="#myMiscSortDrag dd">
			<dt>
			<div class="dragBox" data-sn="box1" data-icon="themes/miscDrag/images/arrow-up.png">容器1</div>
			<div class="dragBox" data-sn="box2">容器2</div>
			<div class="dragBox" data-sn="box3">容器3</div>
			<div class="dragBox" data-sn="box4">容器4</div>
			<div class="dragBox" data-sn="box5">容器5</div>
			</dt>
			<dd>
				<h2 style="text-align: center; font-size: 20px">炉门 Furnace door</h2>
				<div class="door"></div>
			</dd>
		</dl>

		<div class="divider"></div>

		<dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag">
			<dt>
			<div class="dragItem" data-sn="A1">A1</div>
			<div class="dragItem" data-sn="A2">A2</div>
			<div class="dragItem" data-sn="A3">A3</div>
			<div class="dragItem" data-sn="A4">A4</div>
			<div class="dragItem" data-sn="A5">A5</div>
			<div class="dragItem" data-sn="A6">A6</div>
			<div class="dragItem" data-sn="A7">A7</div>
			<div class="dragItem" data-sn="A8">A8</div>
			<div class="dragItem" data-sn="A9">A9</div>
			<div class="dragItem" data-sn="A10">A10</div>
			<div class="dragItem" data-sn="B1">B1</div>
			<div class="dragItem" data-sn="B2">B2</div>
			<div class="dragItem" data-sn="B3">B3</div>
			<div class="dragItem" data-sn="B4">B4</div>
			<div class="dragItem" data-sn="B5">B5</div>
			</dt>
			<dd>
				<div class="arrow">
					<p style="margin-bottom: 20px"><button type="button" onclick="$('#myMiscDrag dt, #myMiscSortDrag dt').add(this).hide()">隐藏</button></p>
					<p>上 Up</p>
					<img src="themes/miscDrag/images/arrow-up.png" height="200"/>
					<p>下 Down</p>
				</div>
				<!--<div class="sortDrag">-->
				<!--<p>容器1</p>-->
				<!--<div class="dragItem">A1<span class="close">×</span></div>-->
				<!--<div class="dragItem">A2<span class="close">×</span></div>-->
				<!--<div class="dragItem">A3<span class="close">×</span></div>-->
				<!--<div class="dragItem">A4<span class="close">×</span></div>-->
				<!--<div class="dragItem">A5<span class="close">×</span></div>-->
				<!--</div>-->

				<!--<div class="sortDrag">-->
				<!--<p>容器2</p>-->
				<!--<div class="dragItem">B1<span class="close">×</span></div>-->
				<!--<div class="dragItem">B2<span class="close">×</span></div>-->
				<!--<div class="dragItem">B3<span class="close">×</span></div>-->
				<!--<div class="dragItem">B4<span class="close">×</span></div>-->
				<!--<div class="dragItem">B5<span class="close">×</span></div>-->
				<!--</div>-->
			</dd>

		</dl>


		<div class="divider"></div>

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


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

</div>

</body>
</html>