-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathc_drag.html
151 lines (143 loc) · 4.38 KB
/
c_drag.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
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>DK Toolkit Index</title>
<link href="resource/css/index_style.css" rel="stylesheet" type="text/css" />
<link href="resource/css/dp_common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="logo_area">
<a id="logo">DK Toolkit</a>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">基础</a></li>
<li><a href="#">控件</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
</header>
<div id="main">
<div class="box_header">
<span>首页</span>
</div>
<nav id="sub">
<ul>
<li><a href="#">基础</a>
<ul class="sub">
<li><a href="#">基础工具库</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">动画</a></li>
</ul>
</li>
<li><a href="#">组件</a>
<ul class="sub">
<li><a href="#">本地存储增强</a></li>
<li><a href="#">Placeholder-jQuery插件</a></li>
<li><a href="#">表单验证工具</a></li>
<li><a href="#">日历</a></li>
<li><a href="#">颜色拾取器</a></li>
<li><a href="#" class="select">拖拽</a></li>
<li><a href="#">多种特效幻灯片</a></li>
<li><a href="#">弹出窗口</a></li>
<li><a href="#">动态表格</a></li>
<li><a href="#">模拟右键菜单</a></li>
<li><a href="#">简单的文本编辑器</a></li>
<li><a href="#">自定义下拉框</a></li>
<li><a href="#">标签控件</a></li>
<li><a href="#">树形菜单</a></li>
<li><a href="#">延迟加载</a></li>
<li><a href="#">图片浏览器</a></li>
</ul>
</li>
<li><a href="#">其他</a>
<ul class="sub">
<li><a href="#">带角的气泡</a></li>
<li><a href="#">会动的眼珠</a></li>
<li><a href="#">HTML5时间轴</a></li>
<li><a href="#">一个简单的HTML5汽车游戏</a></li>
</ul>
</li>
</ul>
</nav>
<div id="main_content">
<div class="cline">
<h2>拖动管理器</h2>
</div>
<style>
#handler{width:50px;height:50px;background:#f00;color:#fff;}
#operator{width:50px;height:50px;background:#0f0;color:#fff;position:relative;top:-50px;left:60px;}
#handler2{background:#00f;}
</style>
<div class="form_box">
<div class="fields_box" style="height:100px">
<div id="handler">拖拽</div>
<div id="operator">
<div id="handler2">拖拽</div>
</div>
</div>
</div>
<div class="cline">
<h3>示例代码</h3>
</div>
<div class="cline">
<pre>
window.getDragManager().regist('handler', 'handler');
window.getDragManager().regist('handler2', 'operator');
</pre>
</div>
<div class="cline">
<h2>使用说明</h2>
</div>
<div class="cline">
通过全局方法getDragManager()方法获取DragManager，通过regist()方法注册需要拖动的内容。
</div>
<div class="cline">
<h3>window.getDragManager()</h3>
</div>
<div class="cline">
获取DragManager对象。
</div>
<div class="cline">
<h3>dragmanager.regist(handler, operator, options)</h3>
</div>
<div class="cline">
<p>注册拖动事件</p>
</div>
<div class="cline">
<h4>参数</h4>
</div>
<div class="cline">
<ol>
<li>handler - (Mix) 鼠标拖动的对象或ID</li>
<li>operator - (Mix) 移动的对象或ID</li>
<li>options - (json, optional) 选项
<ol>
<li>onstart(event) - (function, optional) 开始拖动事件，event包含xPos位置和yPos位置</li>
<li>onmove(event) - (function, optional) 移动事件，event包含xPos位置和yPos位置</li>
<li>onend(event) - (function, optional) 拖拽结束事件，event包含xPos位置和yPos位置</li>
<li>lockX - (bool, optional) 锁定X移动</li>
<li>lockY - (bool, optional) 锁定y移动</li>
<li>xRange - (json, optional) 包含两个值，min和max，x移动范围</li>
<li>yRange - (json, optional) 包含两个属性，min和max，y移动范围</li>
</ol>
</li>
</ol>
</div>
</div>
<div class="clr"></div>
</div>
<footer>
Copyright © Dukai 2012
</footer>
<script src="resource/js/dk_tools.js"></script>
<script src="resource/js/dragmanager.js"></script>
<script>
window.getDragManager().regist('handler', 'handler');
window.getDragManager().regist('handler2', 'operator');
</script>
</body>
</html>