HTML5程序设计-HTML5拖放.pdfVIP

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