论坛首页 → Web前端技术论坛 →

DHTML API,图片和层的拖放

浏览 5306 次
锁定老帖子 主题：DHTML API,图片和层的拖放
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • alibubu
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 40
  • 来自: 北京
   发表时间：2007-03-21  

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。例如：

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

 

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

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


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

js 代码
  1. <script type="text/javascript">   
  2. SET_DHTML("name1", "name2", "anotherLayer", "lastImage");   
  3. </script>   

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

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

js 代码
  1. <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 代码
  1. <img name="name1" src="someImg.jpg" width="240" height="135">  


width和height必须要有设置，最好是绝对值，不要设为什么“50%”之类的。
层：每个层都要有一个唯一的ID，这一点与图像相反，图像是必须要在name属性。必须指定位置，相对和绝对值都可以。例如：

css 代码
返回顶楼
         
  • alibubu
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 40
  • 来自: 北京
   发表时间：2007-03-21  

yumen中,不管我怎么编辑,页面总是乱的,上面的代码跑到下面来了.应该是网站的BUG.
大家如果想清楚地看到原文,可以看这里:

http://chinesedocument.com/html/jishuxueyuan/Webkaifa/Javascript/20070308/3662.html

 
返回顶楼
          回帖地址
0 请登录后投票
  • 7thbyte
  • 等级: 二星会员
  • 性别:
  • 文章: 197
  • 积分: 196
  • 来自: 某个小角落
   发表时间：2007-04-13  
挺实用，还是有些小BUG，比如resize的时候，图片宽高可以拖动为负值，然后图片就看不见了，也不能再操作。
对于拖动时拖出窗口/frame的问题也没能很好解决。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics