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>后。
- <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的路径。 字串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
- <img name="name1" src="someImg.jpg" width="240" height="135">
width和height必须要有设置,最好是绝对值,不要设为什么“50%”之类的。
层:每个层都要有一个唯一的ID,这一点与图像相反,图像是必须要在name属性。必须指定位置,相对和绝对值都可以。例如: