`
alibubu
  • 浏览: 9846 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DHTML API,图片和层的拖放

阅读更多

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 代码
分享到:
评论
4 楼 steven_sun 2007-04-17  
学习下
3 楼 7thbyte 2007-04-13  
挺实用,还是有些小BUG,比如resize的时候,图片宽高可以拖动为负值,然后图片就看不见了,也不能再操作。
对于拖动时拖出窗口/frame的问题也没能很好解决。
2 楼 cozone_柯中 2007-03-21  
学习下
1 楼 alibubu 2007-03-21  
<p><font>yumen中,不管我怎么编辑,页面总是乱的,上面的代码跑到下面来了.应该是网站的BUG.<br/>
大家如果想清楚地看到原文,可以看这里:</font></p>
<p><a href='http://chinesedocument.com/html/jishuxueyuan/Webkaifa/Javascript/20070308/3662.html'>http://chinesedocument.com/html/jishuxueyuan/Webkaifa/Javascript/20070308/3662.html</a></p>
<p> </p>

相关推荐

    DHTML手册 DHTML_API.chm

    - DHTML_API可能提供了一系列的浏览器内置API,用于实现诸如定时器、动画帧、拖放、表单验证等高级功能。 - 这些API接口可能包括`window`对象、`document`对象以及一些特定的DOM元素方法和属性。 6. **浏览器兼容...

    DHTML 中文api

    **DHTML 中文 API 知识点详解** DHTML(Dynamic HTML)是一种在网页上创建动态、交互式内容的技术,它结合了HTML、CSS、JavaScript和DOM(Document Object Model)来实现页面的实时更新和交互性。DHTML的出现极大地...

    html、DHTML 手册API

    1. **CSS**:负责网页的样式和布局,DHTML利用CSS实现了元素的动态定位和动画效果。 2. **DOM**:是HTML和XML文档的结构化表示,JavaScript可以通过DOM操作网页元素,实现动态更新内容。 3. **JavaScript**:提供了...

    api_DHTML_CN

    **API_DHTML_CN.chm** 文件很可能是Microsoft的帮助文件格式,通常包含详细的函数、方法和对象参考,用于开发者理解和使用DHTML API。这个文档可能涵盖以下主题: 1. **BOM(浏览器对象模型)**:提供对浏览器窗口...

    DHTML完全参考手册

    《DHTML完全参考手册》中很可能详细介绍了这些技术的原理、用法和实例,包括但不限于DOM操作、事件处理模型、CSS选择器和样式规则、JavaScript的基本语法和高级特性,以及HTC的使用和限制。这本手册对于提升WEB...

    DHTML用户界面,使用方便

    “docsExplorer”可能是文档浏览器或一个工具,帮助开发者查阅和理解dhtmlxSuite的API文档,以便更有效地使用这些组件。 总的来说,这个主题涵盖了DHTML界面开发的关键要素,包括JavaScript、CSS、DOM操作以及特定...

    php手册 DHTML 手册 JqueryAPi 手册 smarty手册

    你可以在这里学习到如何改变文档的结构、样式和内容,实现动画效果、表单验证、拖放功能、事件处理等。DHTML是现代Web开发的基础,对于前端开发者来说,理解和掌握DHTML至关重要。 【jQuery API手册】 jQuery是一个...

    DHTML

    为此,开发者需要借助于库如jQuery,它提供了统一的API来跨浏览器地操作DOM和执行动画。 **学习资源与实践** 要深入理解和掌握DHTML,可以通过阅读"DHTML.chm"这样的指导手册,了解理论知识并实践编写代码。同时,...

    web中打印区域、鼠标拖放、粘贴多图片数据、目录、多文件进行上传

    ### 知识点详解 #### 一、打印Web区域与指定DHTML元素对象 在Web开发中,有时候需要实现特定区域或元素的打印功能。... - **打印Web区域**:指...通过这些API和功能的实现,可以极大地提升Web应用的用户体验和功能性。

    DHTML手册 默认行为 文档对象模型3合1

    6. **拖放功能**:介绍如何使用HTML5的拖放API实现元素的拖放交互。 这三份资源结合在一起,为网页开发者提供了一个全面的DHTML学习平台,涵盖了从基础概念到高级技术的各个方面,对于提升网页动态效果和交互性的...

    DHTML.rar_DHTML_DHTML chm_html_网页制作

    了解HTML的基本语法和标签体系是学习DHTML的前提,例如`&lt;div&gt;`用于分组元素,`&lt;a&gt;`用于创建链接,`&lt;img&gt;`用于插入图片等。 **CSS样式控制** CSS是DHTML中负责外观和布局的重要组成部分。通过CSS,我们可以定义字体...

    DHTML经典实例大量的特效

    6. **拖放功能**:HTML5引入了拖放API,可以让用户在网页上直接拖动元素,实现自定义排序、文件上传等功能。 7. **图片懒加载**:对于有大量图片的网页,可以利用JavaScript实现图片的延迟加载,只有当图片进入可视...

    jquery jqueryui bootstrap css dhtml js oracle jdk1.6 API

    标题中的“jquery、jqueryui、bootstrap、css、dhtml、js、oracle、jdk1.6 API”涵盖了多个IT领域的关键知识点,这些都是Web开发中的重要组成部分。以下是对这些知识点的详细说明: 1. **jQuery**:这是一个广泛...

    DHTML、CSS、JavaScript网页开发手册

    在网页开发领域,DHTML(Dynamic HTML)、CSS(Cascading Style ...在学习过程中,深入研究每个领域的细节,如CSS的盒模型、JavaScript的数据类型和作用域,以及DHTML中的动画和拖放效果,都将对提升开发技能大有裨益。

    DHTML 完整包

    通过这个压缩包,开发者可以轻松地引入DHTMLX库,利用其丰富的组件和API来创建复杂的用户界面,同时利用CSS和JavaScript实现动态行为。这个包简化了开发流程,使得创建具有现代Web功能的应用程序变得更加简单和高效...

    DHTML中文参考手册.

    属性则为这些标签提供了更多的定制选项,如`src`用于指定图片或脚本的源,`href`定义链接的目标,`id`和`class`用于选择和区分元素。 **CSS样式与布局** CSS(层叠样式表)在DHTML中起着关键作用,它负责网页的...

    HTML[5]、DHTML手册

    4. **HTML5的新特性**:HTML5新增了许多元素和API,如`&lt;canvas&gt;`用于绘制图形,`&lt;audio&gt;`和`&lt;video&gt;`支持多媒体播放,`&lt;form&gt;`元素有更丰富的表单控件,以及地理定位、离线存储、拖放功能等。这些特性大大增强了网页...

    DHTML 手册帮助文档

    2. **JavaScript与DOM操作**:详细介绍如何使用JavaScript与DOM API进行交互,包括选择元素、添加删除元素、修改属性和内容等。 3. **CSS与动画**:讲述如何利用CSS实现各种动态效果,如过渡、动画和关键帧动画。 ...

    html+js+dhtml手册(文档)

    此外,离线存储、拖放功能、Geolocation API等也是HTML5的重要特性。 **JavaScript** 是一种解释型、跨平台的脚本语言,主要用于增加网页的动态性和交互性。JavaScript可以操作DOM(Document Object Model),改变...

Global site tag (gtag.js) - Google Analytics