基于新信息技术的jQuery开发基础教程课件：jQuery UI键鼠交互

jQuery UI键鼠交互9.1元素拖放draganddrop9.2元素排序sortable9.3元素缩放resizable9.4元素选取selectable单元总结

9.1元素拖放draganddrop

拖放是网页中用于移动项目的常用操作，可以使用鼠标将元素拖动，放到另一个页面元素上。拖放包含两个操作：拖拽和放置。虽然这两个操作通常都是在一起使用，但jQueryUI还是对这两个操作进行了区分，将它们分为“drag”(对象的移动)和“drop”(正在移动的对象的存放)操作，并为我们提供了draggable()和droppable()两个方法。

9.1.1draggable()方法

draggable()方法用于创建一个可拖拽(draggable)元素。语法如下：

$(selector).draggable(options)

$(selector).draggable("action",param)

其中：options是以对象键值对的形式传参，每个键值对表示一个选项；action是操作对话框方法的字符串，param则是options的某个选项。

比如在页面中有一个div元素，为了元素能被我们观察到，给它设定200 px的宽度和高度以及一个背景颜色，接下来通过jQueryUI提供的draggable()方法设置它为可拖拽元素，代码如下：

页面运行效果如图9-1和图9-2所示。图9-1页面打开效果图9-2元素拖拽效果

表9-1列出了draggable()方法的设置选项。

表9-2列举了可拖拽元素的一些控制方法。

表9-3列举了可拖拽元素的事件。

9.1.2droppable()方法

droppable()方法用于创建一个可放置(droppable)元素。与可拖拽元素不同，可放置元素必须依赖可拖拽元素存在，它只作为可拖拽元素的目的地元素存在，所以单独设置一个可放置元素而不设置可拖动元素并没有什么意义。语法如下：

$(selector).droppable(options)

$(selector).droppable("action",param)

其中：options是以对象键值对的形式传参，每个键值对表示一个选项；action是操作对话框方法的字符串，param则是options的某个选项。

表9-4列出了droppable()方法的设置选项。

表9-5列举了可放置元素的一些控制方法。

表9-6列举了可放置元素的事件。

9.1.3元素拖放综合示例

如图9-3所示，页面左侧有4张图片，右侧有一个回收站，编程实现用户可以拖动图片放入回收站中，也可以将回收站中的图片拖动出来。图9-3元素拖放综合示例

运行代码后，可以拖动图片到回收站，效果如图9-4所示。图9-4拖动图片放入回收站效果图

9.2元素排序sortable

排序功能在项目开发中也经常会遇到，大多数包含有表格、列表等的页面都是支持排序的。jQueryUI也为我们提供了排序功能，而且使用起来非常的简单。下面是一个简单的排序例子，在页面上有一个无序列表(ul)，我们可以拖动列表中的项(li)改变它们的顺序。

页面代码如下：

页面效果如图9-5所示。图9-5元素排序效果图

jQueryUI的排序功能是通过对元素使用sortable()方法实现的。这里有一点需要注意：jQueryUI的排序(sortable())方法是针对元素的子元素进行排序，因此，如果我们要设置表格的行为可排序，需要对tbody元素应用sortable()方法，而不是对table元素应用sortable()方法。虽然我们经常会省略tbody元素，但是它会自动生成。比如下面的表格代码：

在页面中我们使用开发者工具检查表格后会发现浏览器为我们添加了tbody元素，如图9-6所示。图9-6开发者工具中的表格

9.2.1sortable()方法

sortable()方法的作用是让元素变为可排序小部件，它针对的是被选择元素的子元素。语法如下：

$(selector).sortable(options)

$(selector).sortable("action",param)

其中：options是以对象键值对的形式传参，每个键值对表示一个选项；action是操作对话框方法的字符串，param则是options的某个选项。

表9-7列出了sortable()方法的设置选项。

表9-8列举了元素排序的一些控制方法。

表9-9列举了元素排序的事件。

9.2.2元素排序综合示例

如图9-7所示，页面中有两个无序(ul)列表，编程实现可以拖动列表中的项自由排序或者把第一个列表中的项放到第二个列表中排序。图9-7排序示例页面

页面实现效果如图9-8所示。图9-8排序效果图

9.3元素缩放resizable

jQueryUI也为我们提供了缩放元素的功能，可以应用于任意的元素，非常方便。当把缩放功能应用于一个元素时，将赋予元素一个控制点，并且可以使用鼠标可视化地缩放元素的尺寸。对话框(dialog)部件就是一个典型的可缩放部件，在介绍dialog时，我们已经间接地看到了缩放元素的功能。下面的代码展示了缩放元素的方法：

在页面中我们定义了一个宽、高均为200 px的div元素，并显示它的边框，使用jQuery代码给元素应用resizable()方法后，页面效果如图9-9所示。图9-9设置元素为可缩放

resizable()方法让被选元素可调整尺寸(意味着它们有可拖拽的调整大小的手柄)。我们可以指定一个或多个手柄，也可以指定宽度和高度的最小值及最大值。语法如下：

$(selector).resizable(options)

$(selector).resizable("action",param)

其中：options是以对象键值对的形式传参，每个键值对表示一个选项；action是操作对话框方法的字符串，param则是options的某个选项。

表9-10列出了resizable()方法的设置选项。

表9-11列举了resizable()方法的一些控制方法。

表9-12列举了resizable()方法的事件。

9.4元素选取selectable

jQueryUI提供了selectable()方法，让元素变为可选择元素，允许通过鼠标拖拽选择元素，也可以在按住Ctrl键的同时单击或拖动来选择多个不连续的元素。selectable()方法语法如下：$(selector).selectable(options)$(selector).selectable("action",param)

其中：options是以对象键值对的形式传参，每个键值对表示一个选项；action是操作对话框方法的字符串，param则是options的某个选项。

表9-13列出了selectable()方法的设置选项。

表9-14列举了selectable()方法的一些控制方法。

表9-15列举了selectable()方法的事件。

单 元 总 结

本单元完成了对jQueryUI提供的键鼠交互功能的简要介绍。介绍了诸如拖拽和置放这样的交互性部件，以及如何在这些部件的基础之上实现更加复杂的交互性功能，比如重新