JQuery UI的拖拽功能_H5之家 - 中国HTML5教程资源分享第一站

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之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

最简单的例子

最简单的拖拽是不改变元素所在的容器，而只改变其位置。例子如下：<html> <head></head> <body> <div> <div> <p>拽我!</p> </div> </div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable(); }) </script> </body> </html> 拖动到另一个容器

更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上，增加一个div作为容器，并应用droppable函数：<html> <head></head> <body> <div> <div> <p>拽我!</p> </div> </div> <div> <p>Drop here</p> </div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable(); $( "#droppable" ).droppable(); }) </script> </body> </html> 事件监听和回显（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。看一下实际的例子：<html> <head> </head> <body> <div> <p>:-|</p> </div> <div> <p>Can drop! </p> </div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable({ start: function(event,ui) { $(this).find("p").html(":-S"); }, stop:function(event,ui){ $(this).find("p").html(":-|"); } }); $( "#droppable" ).droppable({ activate: function(event,ui) { $(this).find("p").html( "Drop here !" ); }, over: function(event,ui) { $( this ).find( "p" ).html( "Oh, Yeah!" ); }, out: function(event,ui) { $( this ).find( "p" ).html( "Don't leave me!" ); }, drop: function( event, ui ) { $( this ).find( "p" ).html( "I've got it!" ); } }); }) </script> </body> </html> 复制拖动

前面的例子都是移动元素，另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。

helper可以指定为“original”, "clone"，其中"original"是默认值，即拖动自身，而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数，该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候，需要在target上指定drop事件函数，在该函数中将特定的元素添加到target容器上，否则drop的时候什么事情都不会发生。
简单复制的例子如下：<html> <head></head> <body> <div> <p>拽我!</p> </div> <div> </div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable({ helper:"clone" }); $("#container").droppable({ drop:function(event,ui){ $(this).append($("<p>clone</p>")); } }); }) </script> </body> </html> 拖动控制

到目前位置，所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。

拖动方向