JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理
首先要明确几个概念。
ource:拖拽源,要拖动的元素。
taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
1. drag start:在拖拽源(source)上按下鼠标并开始移动
2. drag move: 移动过程中
3. drag enter: 移动进入目标(target)容器
4. drag leave: 移出目标(target)容器
5. drop: 在目标(target)容器上释放鼠标
6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。
最简单的例子
最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下:
09 |
< script type = "text/javascript" src = "js/jquery-1.7.min.js" ></ script > |
10 |
< script type = "text/javascript" src = "js/jquery-ui-1.8.16.custom.min.js" ></ script > |
13 |
$( "#dragsource" ).draggable(); |
拖动到另一个容器
更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数:
08 |
</div><!-- End container --> |
10 |
<div id= "droppalbe" style= "width: 300px;height:300px;background-color:gray" > |
14 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
15 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
18 |
$( "#dragsource" ).draggable(); |
19 |
$( "#droppable" ).droppable(); |
事件监听和回显(Feedback)
运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。
对于源(source),可以监听的事件包括:
create: 在source上应用draggable函数时触发
start:开始拖动时触发
drap:拖动过程中触发
stop:释放时触发
对于目标(target),可以监听的事件包括:
create: 在target上应用droppable函数时触发
activate:如果当前拖动的source可以drop到本target,则触发
deactivate:如果可以drop到本target的拖拽停止,则触发
over:source被拖动到target上面
out:source被拖动离开target
drop:source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子:
07 |
<p id= "targetMsg" >:-|</p> |
10 |
<div id= "droppable" style= "background-color:gray;height:300" > |
14 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
15 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
18 |
$( "#dragsource" ).draggable({ |
19 |
start: function (event,ui) { |
20 |
$( this ).find( "p" ).html( ":-S" ); |
22 |
stop: function (event,ui){ |
23 |
$( this ).find( "p" ).html( ":-|" ); |
27 |
$( "#droppable" ).droppable({ |
28 |
activate: function (event,ui) { |
29 |
$( this ).find( "p" ).html( "Drop here !" ); |
31 |
over: function (event,ui) { |
32 |
$( this ).find( "p" ).html( "Oh, Yeah!" ); |
35 |
out: function (event,ui) { |
36 |
$( this ).find( "p" ).html( "Don't leave me!" ); |
39 |
drop: function ( event, ui ) { |
40 |
$( this ).find( "p" ).html( "I've got it!" ); |
复制拖动
前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。
helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。
简单复制的例子如下:
08 |
<div id= "container" style= "background-color:gray;height:300" > |
09 |
</div><!-- End container --> |
10 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
11 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
14 |
$( "#dragsource" ).draggable({ |
18 |
$( "#container" ).droppable({ |
19 |
drop: function (event,ui){ |
20 |
$( this ).append($( "<p style='position:absolute;left:" + |
21 |
ui.offset.left+ ";top:" +ui.offset.top+ "'>clone</p>" )); |
拖动控制
到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。
拖动方向
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下:
12 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
13 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
16 |
$( "#dragX" ).draggable({axis: "x" }); |
17 |
$( "#dragY" ).draggable({axis: "y" }); |
拖动范围
除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组: [x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制:
04 |
<div id= "container" style= "background-color:gray;height:300" > |
05 |
<div id= "draggable1" style= "background-color:red;height:20;width:100" > |
09 |
<div id= "draggable2" style= "background-color:green;height:20;width:100" > |
13 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
14 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
17 |
$( "#draggable1" ).draggable({containment: "parent" }); |
18 |
$( "#draggable2" ).draggable({containment: [20,20,300,200] }); |
拖动吸附
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下:
04 |
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } |
08 |
<div id= "container" style= "background-color:gray;height:300" > |
09 |
<div id= "draggable1" class= "draggable" > |
13 |
<div id= "draggable2" class= "draggable" > |
17 |
<div id= "draggable3" class= "draggable" > |
20 |
</div><!--container--> |
22 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
23 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
26 |
$( "#draggable1" ).draggable({ snap: true }); |
27 |
$( "#draggable2" ).draggable({ snap: "#container" }); |
28 |
$( "#draggable3" ).draggable({grid: [30,30]}); |
拖动把手(handle)
默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如:
6 |
$( "#draggable" ).draggable({handle: "p" }); |
Drop限制
默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如:
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。
增强用户体验
前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下:
04 |
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } |
05 |
.droppable { width: 300px; height: 300px; background-color:red} |
10 |
<div id= "draggable2" class= "draggable" > |
11 |
<p>I revert when I'm not dropped</p> |
14 |
<div id= "droppable" class= "droppable" > |
17 |
<script type= "text/javascript" src= "js/jquery-1.7.min.js" ></script> |
18 |
<script type= "text/javascript" src= "js/jquery-ui-1.8.16.custom.min.js" ></script> |
21 |
$( "#draggable2" ).draggable({ revert: "invalid" ,cursor: "move" , cursorAt: { top: 56, left: 56 } }); |
22 |
$( "#droppable" ).droppable({ |
23 |
activeClass: "ui-state-hover" , |
24 |
hoverClass: "ui-state-active" , |
25 |
drop: function ( event, ui ) { |
27 |
.addClass( "ui-state-highlight" ) |
小结
JQuery UI提供了强大的拖拽功能和良好的用户体验,同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考项目主页的Draggable 和 Droppable 。
转自:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html