www.walterzorn.com 网站提供一些功能非常好的 JavaScript 封装，ITPOW以中文的形式介绍该网站的产品。
图像和层拖放
JavaScript Library. 开发者: Walter Zorn
一个添加了 Drag Drop 功能和扩展 DHTML 适应层和任意想要图形的跨浏览器的 JavaScript DHTML Library。
可选命令允许多种方式改变和自定义 Drag&Drop 项目的行为。比如，你可以限制一个拖放物件可以被移动多远、特定的鼠标、或多个拖放图像。这个 DHTML Drag&Drop JavaScript 的 DHTML API 简单易懂。它为拖放物件提供 moveTo()、resizeTo()、hide() 和 show() 方法，或者在网页的文字流中动态 copy() 图片，还有更多。每一个 DHTML 项目有属性，比如 x、y、w、h、z、defx、defy、defw、defh、defz（分别为：坐标、大小、z-index 和其它初始默认值）还有更多其它，你可以在想要的地方看到他们。比如，要保存拖放项目的当前位置，你可以写它的 x 和 y 属性到 <input type="hidden"> 这样的 from 元素，你可以传输他们到服务器端。关于更多，请参见 DHTML API 和命令参考。
用调节大小代替拖拽？
当拖拽一个元素时，按住 <Shift> 键，以便让 wz_dragdrop.js 工作于调节大小模式，而不是拖拽模式。这个功能可以通过传输命令 RESIZABLE 到 SET_DHTML() 轻松实现，或命令 SCALABLE 保持元素的宽/高比例。这些命令可选择性地应用，对特定或所有的拖放元素。
跨浏览器功能
绝大多数浏览器（见下面的列表），除了一些极少使用的，都可以解释这些 DHTML Drag&Drop JavaScript。
Linux：
基于 Gecko 引擎的浏览器（Mozilla、Netscape 6+、Galeon...）、Konqueror 3.2+、Netscape 4、Opera 5+。
Windows：
Gecko 浏览器（Mozilla、Netscape 6+、Phoenix...）、Netscape 4、Opera 5, 6 and 7、Internet Explorer 4+。
其它系统：
Mac Safari 可以正常工作，并且不逊于他们在 Linux 和 Windows 中的副本，我已经给出了 Gecko 浏览器、Netscape 4 and Opera 5+ 无限制访问和执行 Drag&Drop JavaScript。
Window 调节大小事件
wz_dragdrop.js 自动重聚图像和相对位置的层到页面逻辑结构中。也就是说，换行、表大小已经改变也能回到页面流。项目事先已经被拖拽出来保持他们的在页面流中默认位置的相对位移（顺便说一下，是通过每个项目的 defx 和 defy 属性）。那就意味着：如果用户决定调节浏览器窗口的大小时不用破坏 API。
如何包含 Drag&Drop Script
1、HTML 文件：为 Drag&Drop 元素命名
图像：每一个设置为可拖拽的图像需要唯一的名称，比如：<img name="name1" src="someImg.jpg" width="240" height="135">，宽度和高度属性需要强制指定的，并且应该用 width="240" 这样的绝对数字，而不是像 width="33%" 这样的相对数字。
层：每一个层需要唯一的 ID，相对于图像，必须用相对或绝对定位：<div id="name2" style="position:absolute;...">Content</div>。
2、插入代码段到 HTML 文件中
插入下面的行到你的 html 文件的 <body> 节，紧跟（不是之前）<body> 开标签之后。
下面的位于 </body> 闭标签之前。
示例很显然：拖放元素的名称必须传送到 SET_DHTML() ，每一个名称放在引号中，并用逗号分隔。名称的顺序任意。
3、保存脚本文件
下载 JavaScript Drag Drop 库。解压保存为 wz_dragdrop.js 到 html 文件的目录，或者如果你把库保存到不同的目录则更改上面代码片段的路径 src="wz_dragdrop.js"。
下载 wz_dragdrop.zip wz_dragdrop.js 4.91，按 LGPL 发布。
4、保存透明的 1x1 像素的 GIF
transparentpixel.gif 来自于下载的 wz_dragdrop.zip 文件中，在 Netscape 4 中拖放图片的默认位置创建占位块时需要这个文件。transparentpixel.gif 应该保存到 html 文件相同的位置。5、没有工作？
现在一节都应该工作起来，如果没有：
a) 检查你网页的 HTML 和 CSS 语法，最好利用 http://validator.w3.org/ 上的 W3C-Online-Validator。
b) 确保你已经仔细按照第一步到第四来做（这是常出现的原因）。
c) 检查你自己的 JavaScript 代码的逻辑错误和语法错误，然后查看你的浏览器 JavaScript 错误控制台。
d) 偶尔，问题由于页面的 XHTML DTD 引起的，由于 XHTML 规格－烦人的－不执行 document.write()，此时只有是的你页面的 DTD，更好的是 HTML 4.01。
不要声称你找到了一个 bug－除非你确信已经仔细检查了所有的内容，我们欢迎任何途径的反馈。
DHTML API
克隆或繁殖一个图像？
或者改变鼠标？或者改变一个图像为可停止的滑块条？这里有许多命令传递到 SET_DHTML() 来改变 JavaScript Drag&Drop 项目的行为。
脚本 Drag&Drop 元素
比如，读取特定拖放项目的当前坐标，然后调用 moveTo() 方法提供简单的途径改变图像和层。并且，你可以转换简单的网页，只需要包含一些图像，一个图形用户接口程序，依据元素的坐标工作……DHTML Drag&Drop Library 提供简单易懂的、用户友好的拖放元素属性方法接口。使用这个库的 DHTML API 你不必担心浏览器或 DOM 探测－所有这些都由库执行。示例：
在任何浏览器中库解释将移动 "image2" 到绝对坐标（300, 200），同样确信表达式 dd.elements.image2.x 将获取图像的当前 X 坐标。
Drag&Drop 元素的可用命令
全局命令，对所有的 Drag&Drop 元素有效，使用 SET_DHTML() 传递各个参数。个别命令，另一方面，用加号连成一串，直接定位到相关元素的 name/ID。参见下面的例子：
CLONE(individual, images only) 创建静态拷贝，该拷贝不具备可拖拽性以及 DHTML 能力。
COPY(individual, images only) 创建指定数量的拷贝，与 CLONE 不同的是每个拷贝均可拖拽。
CURSOR_HAND(global and individual, images and layers) 改变拖放项目时的鼠标。
DETACH_CHILDREN(individual, layers only) 让子元素不随父元素拖拽。
HORIZONTAL(individual, images and layers) 只能在水平方向上拖拽。
MAXWIDTH, MAXHEIGHT, MINWIDTH, MINHEIGHT(individual, images and layers) 当 <SHIFT> + 鼠标改变元素大小时元素的大小范围。
MAXOFFBOTTOM, MAXOFFLEFT, MAXOFFRIGHT, MAXOFFTOP(individual, images and layers) 这些值标明元素能被拖离默认位置多远。
NO_ALT(global and individual, images only) 禁用相关元素的 ALT 和 TITLE 属性。
NO_DRAG(individual, images and layers) 禁止拖拽，让元素成为普通的 DHTML 元素。
RESET_Z(global and individual, images and layers) 默认情况下，拖拽元素后，元素的 z-index 会变到最大，该命令使 z-index 保持不变。
RESIZABLE(global and individual, images and layers) 允许在按住
SCALABLE(global and individual, images and layers) 调节元素大小时保持宽/高比率。
SCROLL(global and individual, images and layers) 当拖拽到窗口边缘时自动滚到页面以显示完整的元素。
TRANSPARENT(global and individual, images and layers) 拖拽时透明。
VERTICAL(individual, images and layers) 只允许竖直方向上拖拽。
