文章正文

DHTML API,图片和层的拖放

来源:    2007-3-8 14:28:05 网友评论 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。例如:
<img name="name1" src="someImg.jpg" width="240" height="135">
width和height必须要有设置,最好是绝对值,不要设为什么“50%”之类的。
层:每个层都要有一个唯一的ID,这一点与图像相反,图像是必须要在name属性。必须指定位置,相对和绝对值都可以。例如:
<div id="name2" style="position:absolute;...">Content</div>.

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

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

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

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

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

3、保存脚本文件
下载这个库文件,解压它,将wx_dragdrop.js放到你的网站目录下。根据你放的位置,适当地调整
<script type="text/javascript" src="wz_dragdrop.js"></script>中src的路径。

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



上一篇:DHTML API,图片和层的拖放库
下一篇:Smile eZ Publish Eclipse plugin
用户名:新注册) 密码: 匿名评论 [所有评论]
评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
本栏搜索

  • Google Chinesedocument.com
 网站首页 -  网站地图 -  技术论坛 -  网站投稿 -  广告服务 -  手机游戏
©2007 分享文档 Chinesedocument.com [京ICP备06000384号]