通过本文，了解使用拖放功能移动 Web
页面的不同部分的技巧。分别实现交互性的不同方面，然后再将它们组合在一起，这样便于灵活定制页面，也让您的 Web 用户非常满意。
JavaScript 是一种功能强大的语言，可用于创建基于 Web
的应用程序。它已经足够稳定和成熟，完全可以创建与传统桌面应用程序相抗衡的程序，因为后者在稳定性和特性丰富性方面都要胜出一筹。但 JavaScript
最初只是用来向静态 Web 页面添加某些交互性，使它不再是静态页面，它现在还用于此目的。
我将要展示的这个技巧的关键之处是如何恰当地构建页面，使它能与 JavaScript 代码交互。通常，页面都是通过头脑里固有的 JavaScript
代码构造的。但是，尽管如此，很多时候您都需要向现有页面内添加新的交互特性。而这往往需要一些技巧，因为 JavaScript
代码必须遍历文档结构并在合适的位置添加代码，而且通常还要求不影响现有的结构 — 和页面上已有的 JavaScript
代码。总之，要将对系统的影响最小化。
 |
|
本文介绍了一种方法，它通过移动页面的不同部分来激活 页面。具体来讲，就是通过将一个部分拖放到另一个部分之上从而实现可切换
部分的切换。
要激活这些部分，只需向其添加 class 参数并加载一个 JavaScript 文件。可以通过向
<body> 标记添加 onload
方法来激活代码，此方法会在页面加载之后立即启动代码。代码会处理随后的事情。
注意：本文示例所对应的源代码可以从 下载
部分获得。
此外，可以尽量多地使用抽象来构造代码。程序的不同元素通常都不必要地相互缠结，UI
代码更是这样。可切换系统由不同的块构建而成，每个块实现交互性的不同部分。这些块结合起来就能实现简单无缝的界面，该界面对于 UI 的试验和调优都很关键。
 |
|
可切换系统很容易使用。先由 Web
页面设计人员将某些部分标志为可切换的。然后就可以在任何一个可切换元素上单击并将该元素拖放到另一个可切换元素。放开鼠标按钮后，这两个元素就完成了交换。
为了能清楚展示所发生的事情，可以使用一些标准的 GUI 操作。
当第一次单击可切换元素时，在光标下面会出现一个透明的矩形。这个矩形由 coveringDiv()
函数创建，它刚好能覆盖这个可切换元素。实际上是将这个矩形拖放到另一个元素。当拖放时，只有这个透明的矩形会移动 — 初始的元素保持不动直到鼠标按钮被松开为止。
另一个重要的操作是清晰标识出要拖动到的目标元素。当拖动透明的矩形四处移动时，光标可以经过多个可切换元素。当光标悬浮于某个可切换元素之上时，该元素就会通过另一个透明矩形突出显示。这种突出显示就能清楚地标示出此元素就是拖放到的目标。当松开鼠标按钮时，被拖动的元素和拖放到的目标元素就会互换位置，而且所有透明矩形也会消失，直到下一次切换。
正如先前提到的，必须要使代码对已有系统影响最小。这就意味着页面设计人员 —工作于 HTML 或 XML— 无需涉及可切换系统。这不是他们的工作。
此页面只需具有如下三项内容：
- JavaScript 标记
<body>标记内的onload方法- 标记为 swappable 的可切换区域
必须将以下标记置于页面文件的顶部：
<script src="rearrange-your-page.js"></script> |
此标记在加载过程的早期加载，但它在 body 内的 onload 函数调用之后才会执行。
该方法在整个页面加载时调用这个可切换系统。这一点很重要，因为此代码的第一项功能就是在整个页面内搜索可切换的元素。因而，需要确保这些元素已加载。body
内的 onload 方法应该如清单 1 所示。
|
必须通过 class
参数这样标记每个想要切换的区域。这是页面作者和设计人员需要多加考虑的事情，因为他们需要将此参数添加给每个部分。参见清单 2。
|
代码所需做的首要事情是寻找页面将被激活的部分。正如之前提到的，这只要求包围这个部分的标记具有 class
参数。要寻找这些部分，需要找到所有具有可切换 class 的标记。此函数不是标准 DOM 库的一部分，但它很容易实现。清单 3
展示了一个示例实现。
清单 3. getElementsByClass() 的实现
本文转自IBM Developerworks中国