- 论坛徽章:
- 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 代码
<img name="name1" src="someImg.jpg" width="240" height="135">
width和height必须要有设置，最好是绝对值，不要设为什么“50%”之类的。
层：每个层都要有一个唯一的ID，这一点与图像相反，图像是必须要在name属性。必须指定位置，相对和绝对值都可以。 |
|
免费注册
发表于 2008-07-29 14:20