第5章 HTML5.pptVIP

5.2.1 dataTransfer对象的属性 1．dropEffect属性 2．effectAllowed属性 1．dropEffect属性 2．effectAllowed属性 HTML5基础教程 授课教师： 职务： 第5章 HTML5拖放 课程描述 拖放是一种常见的操作，也就是用鼠标抓取一个对象，将其拖放到另一个位置。例如，在Windows中，可以将一个对象拖放到回收站中。过去，在Web应用程序中实现拖放的应用并不多。在 HTML5 中，拖放已经是标准的一部分，任何元素都能够拖放。可以拖放网页中的元素，也可以从桌面拖放到网页中。应用拖放特性实现的网页将更新颖、更方便，比如直接从桌面向网页中拖放文件以上传文件。 本章知识点 5.1 概述 5.2 传递拖拽数据 5.3 HTML5拖放的实例 5.1 概述 5.1.1 什么是拖放 5.1.2 设置元素为可拖放 5.1.3 拖放事件 5.1.1 什么是拖放 拖放可以分为两个动作，即拖拽（drag）和放开（drop）。拖拽就是移动鼠标到指定对象，按下左键，然后拖动对象；放开就是放开鼠标左键，放下对象。当开始拖拽时，可以提供如下信息： （1）被拖拽的数据。这可以是多种不同格式的数据，例如，包含字符串数据的文本对象。 （2）在拖拽过程中显示在鼠标指针旁边的反馈图像。用户可以自定义此图像，但大多数时候只能使用默认图像。默认图像将基于按下鼠标时鼠标指针指向的元素。 （3）运行的拖拽效果。可以是以下3种拖拽效果： ? copy，指被拖拽的数据将从当前位置复制到放开的位置； ? move，指被拖拽的数据将从当前位置移动到放开的位置； ? link，指在源位置和放开的位置之间将建立某种关系或连接。 5.1.2 设置元素为可拖放 首先要定义使网页中的元素可以被拖放，可以通过将元素的draggable属性设置为true实现此功能。 【例5-1】 在网页中定义一个可拖放的图片，代码如下： !DOCTYPE html html body img src=Water lilies.jpg draggable=true / /body /html 5.1.3 拖放事件 被拖动对象 在拖放过程，松开鼠标时触发 Dragend 当前目标对象 每当对象被放开时就会触发 Drop 被拖动对象 每当对象被拖动时就会触发 Drag 先前目标对象 在拖动过程中，当被拖动对象离开目标对象时触发 Dragleave 当前目标对象 当对象拖动到目标对象时触发 dragover 目标对象 当对象第一次被拖动到目标对象上时触发，同时表示该目标对象允许执行“放”的动作 dragenter 被拖动对象 开始拖对象时触发 dragstart 作 用 对 象 说 明 事 件 拖放事件被触发的顺序 dragstart→dragenter→dragover→drop→dragend 拖放事件的处理函数 在定义元素时，可以指定拖放事件的处理函数。例如，在网页中定义一个可拖放的图片，并指定其dragstart事件的处理函数为drag(event)代码如下： img src=Water lilies.jpg draggable=true ondragstart=drag(event) / drag(event)函数的格式如下： script type=text/javascript function drag(ev) { // 处理dragstart事件的代码 } /script 每个拖放事件的处理函数都有一个Event对象作为参数。Event 对象代表事件的状态，比如发生事件中的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 5.2 传递拖拽数据 5.2.1 dataTransfer对象的属性 5.2.2 dataTransfer对象的方法 默认值，即没有指定光标 none 显示move光标 move 显示link光标 link 显示copy光标 copy 说 明 取值 默认值，表明没有为effectAllowed属性设置值，执行缺省的拖放操作 uninitialized 没有数据传输操作，即放开（drop）是不执行任何操作 none 允许所有数据传输操作 all 可以是link或move，取决于目标对象的缺省值 linkMove 可以是copy或move，取决于目标对象的缺省值 copyMove 可以是copy或link，取决于目标对象的缺省值 copyLink 将源对象移动到目的地 move 将源对象链接到目的地 link 允许执行复制操作 copy 说 明 取值 5.2.2 dataTransfer对象的方法 1．get