19、网页拖放功能全解析

网页拖放功能全解析

在当今的网页设计中，拖放功能是“Web 2.0 界面”的重要组成部分。无论是在可定制的门户页面中移动板块、调整元素大小、将商品放入购物车，还是重新排列列表中的项目，都离不开拖放操作。幸运的是，script.aculo.us 为我们提供了强大的拖放支持，方便我们将其集成到自己的网页应用中。

1. 准备工作

要使用 script.aculo.us 的拖放功能，需要加载 dragdrop 模块，而该模块依赖于 effects 模块。因此，加载 script.aculo.us 的最小代码如下：

<script type="text/javascript"
src="scriptaculous.js?load=effects,dragdrop"></script>

2. 实现元素可拖放

首先，我们来看看如何让一个元素变得可拖放。这其实很简单，只需实例化一个 Draggable 对象即可：

new Draggable(element);

如果之后需要移除元素的拖放功能，可以保存该对象的引用，并在需要时调用其 destroy() 方法。

下面我们通过一个具体的例子来详细说明。我们将创建一个小棋盘，并在上面放置一个可爱的 Tux（Linux 吉祥物）。
-