-
Notifications
You must be signed in to change notification settings - Fork 263
/
Copy pathmiscDrag2.html
139 lines (113 loc) · 5.43 KB
/
miscDrag2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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>