DHTML API,图片和层的拖放

最新推荐文章于 2018-10-07 10:29:15 发布

iteye_113

最新推荐文章于 2018-10-07 10:29:15 发布

阅读量122

点赞数

分类专栏：随便写写文章标签： JavaScript CSS IE 脚本 HTML ViewUI

随便写写专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DHTML API,图片和层的拖放
版权申明：本文是分享文档原创，转载请不要去掉本版权申明。
这是一个基于浏览器的JavaScript DHTML库，它可以为你的图像和层增加拖放功能，并且扩展了DHTML的能力。

要想把图像和层加到可拖放的DHTML的条目里，只需要简单地把它们的名称或ID放到这个库的主函数“SET_DHTML()” 。
可选命令允许你改变或自定义拖放条目的形为，有多种方式可以选择。例如，你可以限制一个可拖放条目能够被移动多远的距离，可以指定光标的样式，或者增加可拖放图片。这个DHTML库很容易理解和使用。它提供了很多方法，如moveTo()，resizeTo()，hide()和show()，也可以在你的页面里面copy()图片，还有很多。每个DHTML条目都有很多属性，如x,y,w,h,z,defx,defy,defw,defh,defz()，还有很多，无论何时你都可以使用这些属性。例如，要保存当前可拖放条目的位置，你可以将它的x和y属性写到一个表单的隐藏字段里，然后传送到服务器端。要看详细情况，可以参考DHTML AIP和commands的文档。

用Resize来替代Drag?
当wz_dragdrop.js在运行时，你可以按下<Shift>键不放，当拖放那些可拖放条目时，我们按下<Shift>键不放，可以让wz_dragdrop.js工作在Resize模式而不是Drag模式。这个功能通过对SET_DHTML()调用一个RESIZEABLE命令就可以激活。

如何加入可拖放的脚本?
1、HTML 文件：可拖放元素的名称
图像：每个想要可拖放的图像都应有一个唯一的name。例如：

<div id="name2" style="position:absolute;...">Content</div>

2、将代码加到HTML文件里
将下面这行代码放到你的HTML文件里的<body>里，注意，必须放到<body>后。

js 代码

<script type="text/javascript" src="wz_dragdrop.js"></script>

下面这些代码放到</body>之前。

js 代码

<script type="text/javascript">
SET_DHTML("name1", "name2", "anotherLayer", "lastImage");
</script>

从这个例子中可以看出，我们只要简单地将可拖放元素的名称传给SET_DHTML( )，用引号和逗号分开它们就可以了。这些名称的顺序是任意的
。

3、保存脚本文件
下载这个库文件，解压它，将wx_dragdrop.js放到你的网站目录下。根据你放的位置，适当地调整

js 代码

<script type="text/javascript" src="wz_dragdrop.js"></script>

中src的路径。字串1

4、保存transparent.gif图片
在你下载的文件里包括了这个图片，它对于Netscape 4来说是必须的，它用来产生空白的空间。如果你用的是IE，则不用考虑。

附录:
· Optional Commands: http://www.walterzorn.com/dragdrop/commands_e.htm
· DHTML API, Scripting Drag Drop Items: http://www.walterzorn.com/dragdrop/api_e.htm
· Examples using the DHTML API : http://www.walterzorn.com/dragdrop/demos/demos.htm

css 代码