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属性。必须指定位置,相对和绝对值都可以。例如:
css 代码
分享到:
相关推荐
- DHTML_API可能提供了一系列的浏览器内置API,用于实现诸如定时器、动画帧、拖放、表单验证等高级功能。 - 这些API接口可能包括`window`对象、`document`对象以及一些特定的DOM元素方法和属性。 6. **浏览器兼容...
**DHTML 中文 API 知识点详解** DHTML(Dynamic HTML)是一种在网页上创建动态、交互式内容的技术,它结合了HTML、CSS、JavaScript和DOM(Document Object Model)来实现页面的实时更新和交互性。DHTML的出现极大地...
1. **CSS**:负责网页的样式和布局,DHTML利用CSS实现了元素的动态定位和动画效果。 2. **DOM**:是HTML和XML文档的结构化表示,JavaScript可以通过DOM操作网页元素,实现动态更新内容。 3. **JavaScript**:提供了...
**API_DHTML_CN.chm** 文件很可能是Microsoft的帮助文件格式,通常包含详细的函数、方法和对象参考,用于开发者理解和使用DHTML API。这个文档可能涵盖以下主题: 1. **BOM(浏览器对象模型)**:提供对浏览器窗口...
《DHTML完全参考手册》中很可能详细介绍了这些技术的原理、用法和实例,包括但不限于DOM操作、事件处理模型、CSS选择器和样式规则、JavaScript的基本语法和高级特性,以及HTC的使用和限制。这本手册对于提升WEB...
“docsExplorer”可能是文档浏览器或一个工具,帮助开发者查阅和理解dhtmlxSuite的API文档,以便更有效地使用这些组件。 总的来说,这个主题涵盖了DHTML界面开发的关键要素,包括JavaScript、CSS、DOM操作以及特定...
你可以在这里学习到如何改变文档的结构、样式和内容,实现动画效果、表单验证、拖放功能、事件处理等。DHTML是现代Web开发的基础,对于前端开发者来说,理解和掌握DHTML至关重要。 【jQuery API手册】 jQuery是一个...
为此,开发者需要借助于库如jQuery,它提供了统一的API来跨浏览器地操作DOM和执行动画。 **学习资源与实践** 要深入理解和掌握DHTML,可以通过阅读"DHTML.chm"这样的指导手册,了解理论知识并实践编写代码。同时,...
### 知识点详解 #### 一、打印Web区域与指定DHTML元素对象 在Web开发中,有时候需要实现特定区域或元素的打印功能。... - **打印Web区域**:指...通过这些API和功能的实现,可以极大地提升Web应用的用户体验和功能性。
6. **拖放功能**:介绍如何使用HTML5的拖放API实现元素的拖放交互。 这三份资源结合在一起,为网页开发者提供了一个全面的DHTML学习平台,涵盖了从基础概念到高级技术的各个方面,对于提升网页动态效果和交互性的...
了解HTML的基本语法和标签体系是学习DHTML的前提,例如`<div>`用于分组元素,`<a>`用于创建链接,`<img>`用于插入图片等。 **CSS样式控制** CSS是DHTML中负责外观和布局的重要组成部分。通过CSS,我们可以定义字体...
6. **拖放功能**:HTML5引入了拖放API,可以让用户在网页上直接拖动元素,实现自定义排序、文件上传等功能。 7. **图片懒加载**:对于有大量图片的网页,可以利用JavaScript实现图片的延迟加载,只有当图片进入可视...
标题中的“jquery、jqueryui、bootstrap、css、dhtml、js、oracle、jdk1.6 API”涵盖了多个IT领域的关键知识点,这些都是Web开发中的重要组成部分。以下是对这些知识点的详细说明: 1. **jQuery**:这是一个广泛...
在网页开发领域,DHTML(Dynamic HTML)、CSS(Cascading Style ...在学习过程中,深入研究每个领域的细节,如CSS的盒模型、JavaScript的数据类型和作用域,以及DHTML中的动画和拖放效果,都将对提升开发技能大有裨益。
通过这个压缩包,开发者可以轻松地引入DHTMLX库,利用其丰富的组件和API来创建复杂的用户界面,同时利用CSS和JavaScript实现动态行为。这个包简化了开发流程,使得创建具有现代Web功能的应用程序变得更加简单和高效...
属性则为这些标签提供了更多的定制选项,如`src`用于指定图片或脚本的源,`href`定义链接的目标,`id`和`class`用于选择和区分元素。 **CSS样式与布局** CSS(层叠样式表)在DHTML中起着关键作用,它负责网页的...
4. **HTML5的新特性**:HTML5新增了许多元素和API,如`<canvas>`用于绘制图形,`<audio>`和`<video>`支持多媒体播放,`<form>`元素有更丰富的表单控件,以及地理定位、离线存储、拖放功能等。这些特性大大增强了网页...
2. **JavaScript与DOM操作**:详细介绍如何使用JavaScript与DOM API进行交互,包括选择元素、添加删除元素、修改属性和内容等。 3. **CSS与动画**:讲述如何利用CSS实现各种动态效果,如过渡、动画和关键帧动画。 ...
此外,离线存储、拖放功能、Geolocation API等也是HTML5的重要特性。 **JavaScript** 是一种解释型、跨平台的脚本语言,主要用于增加网页的动态性和交互性。JavaScript可以操作DOM(Document Object Model),改变...