36、jQuery UI 可拖动小部件：功能、使用与定制

jQuery UI 可拖动小部件：功能、使用与定制

1. jQuery UI 交互与效果概述

jQuery UI 不仅提供用户界面小部件，还为网页和 Web 应用程序增添了一系列实用的交互功能。这些交互功能允许用户在页面上移动元素，例如使元素可拖动和可放置，就像将文件拖到垃圾桶或把商品拖到购物车一样。此外，还能创建可排序的列表，用户只需拖动项目到新位置即可重新排列，如待办事项列表或音乐播放列表。

同时，jQuery UI 包含一套特效，可通过高质量动画为网站增添视觉魅力。例如，让元素背景颜色闪烁、使页面元素弹跳、摇晃、缩放或爆炸等。

2. 可拖动小部件介绍

在计算机操作中，拖动是非常自然的行为，如将文件拖入文件夹或垃圾桶、拖动窗口以腾出空间等。jQuery UI 通过其可拖动小部件和配套的可放置小部件，将这种交互带到了网页上。可拖动小部件能让任何页面元素变得可移动，比如 jQuery UI 的对话框小部件，对话框弹出后可自由拖动到其他位置。还能结合可放置小部件创建交互式购物车，用户将商品图片拖到购物车图标上，商品即被添加到购物车。

3. 将可拖动小部件添加到网页

要将可拖动小部件添加到网页，可按以下步骤操作：
1. 按照相关步骤附加 CSS 和 JavaScript 文件。需注意，jQuery UI 有自己的 CSS 和 JavaScript 文件，且 jQuery UI 的 JavaScript 文件应在 jQuery 的 JavaScript 文件之后链接。
2. 添加 jQuery 的 $(document).ready() 函数到页面或其他外部 JavaS