HTML5程序设计-HTML5拖放
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
省的拖放操作
5.2.2 dataTransfer对象的方法
1．getData()方法 2．setData ()方法 3．ClearData()方法
1．getData()方法
getData()方法用于从dataTransfer对象中 以指定的格式获取数据，语法如下：
sretrievedata = object.getdata(sdataformat)
HTML5基础教程（第2版）
授课教师： 职务：
第5章 HTML5拖放
课程描述
拖放是一种常见的操作， 也就是用鼠标抓取一个对 象，将其拖放到另一个位 置。例如，在Windows中， 可以将一个对象拖放到回 收站中。过去，在Web应用 程序中实现拖放的应用并 不多。在 HTML5 中，拖放 已经是标准的一部分，任 何元素都能够拖放。可以 拖放网页中的元素，也可 以从桌面拖放到网页中。 应用拖放特性实现的网页 将更新颖、更方便，比如 直接从桌面向网页中拖放 文件以上传文件。
dropArea. hover的CSS样式代码
#dropArea.hover { background-color: yellow;
} 默认的dropArea的CSS样式代码如下： #dropArea {
width:150px; height: 20px; padding:10px; border:3px solid #ff0000; background-color: #EEEEEE; }
3．ClearData()方法
ClearData()方法用于从dataTransfer对象中删除数 据，语法如下：
pret = object.cleardata( [sdataformat]) 参数sdataformat是指定要删除的数据格式的字符串
，可以是下面的值： Text，删除文本格式数据。 URL，删除URL格式数据。 File，删除文件格式数据。 HTML，删除HTML格式数据。 Image，删除图像格式数据。 如果不指定参数sdataformat，则清空dataTransfer
（1）被拖拽的数据。这可以是多种不同格式的数据，例如，包含 字符串数据的文本对象。
（2）在拖拽过程中显示在鼠标指针旁边的反馈图像。用户可以自 定义此图像，但大多数时候只能使用默认图像。默认图像将基于 按下鼠标时鼠标指针指向的元素。
（3）运行的拖拽效果。可以是以下3种拖拽效果： copy，指被拖拽的数据将从当前位置复制到放开的位置； move，指被拖拽的数据将从当前位置移动到放开的位置； link，指在源位置和放开的位置之间将建立某种关系或连接。
drag(event)函数的格式如下： <script type="text/javascript"> function drag(ev) {
// 处理dragstart事件的代码 } </script> 每个拖放事件的处理函数都有一个Event对象作为参数。Event 对
象代表事件的状态，比如发生事件中的元素、键盘按键的状态、 鼠标的位置、鼠标按钮的状态。
Drop事件的处理函数
当文件被放开时会触发Drop事件，处理函数为drop()，代码如下： function drop(ev) {
ev.preventDefault(); document.getElementById('dropArea').className = ""; document.getElementById('fileinfo').innerHTML = " 共选择了" + ev.dataTransfer.files.length.toString() + " 个文件"; for(var i=0;i< ev.dataTransfer.files.length;i++) {
5.4 在 Vue .js中实现拖拽功能
5.4.1 5.4.2 5.4.3
组件
5.4.4
require.js 注册vuedraggable.js组件 在HTML中使用vuedraggable.js
应用实例
5.4.1 require.js
为了避免在加载require.js时造成网页失去响应，可 以在网页的底部添加如下代码，引用require.js：
本章知识点
5.1 5.2 5.3 5.4
概述 传递拖拽数据 HTML5拖放的实例 在 Vue .js中实现拖拽功能
5.1 概述
5.1.1 什么是拖放 5.1.2 设置元素为可拖放
5.1.3 拖放事件
5.1.1 什么是拖放
拖放可以分为两个动作，即拖拽（drag）和放开（drop）。拖拽 就是移动鼠标到指定对象，按下左键，然后拖动对象；放开就是 放开鼠标左键，放下对象。当开始拖拽时，可以提供如下信息：
tById(data)); } 程序首先阻止事件的默认动作，然后从ataTransfer对
象中以文本格式获取拖动对象时保存的拖动的HTML元 素的ID。
浏览【例5-2】的界面
wenku.baidu.com
5.3.2 拖放文件
本节介绍一个拖放文件的实例。被拖放的文件 对象保存在event. dataTransfer.files中， 可以同时拖动多个文件。
document.getElementById('fileinfo').innerHTML += "<br>文件名:" + ev.dataTransfer.files[i].name + "; 文件大小:"+ev.dataTransfer.files[i].size + "字节"; } }
使用【例5-3】拖放文件的页面
【例5-3】
在网页中定义一个div元素，用于接收被拖动的文件，代码如下 ：
<div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">请把文件拖放到这 </div>
当对象拖动到div元素时触发dragover事件，处理函数为 allowDrop()，代码如下：
function allowDrop(ev) { ev.preventDefault(); document.getElementById('dropArea').className =
'hover'; } 程序阻止了事件的默认动作，并将div元素dropArea的ClassName
设置为'hover'，这是为了在对象拖动到div元素时改其背景色。
显示link光标
move
显示move光标
none
默认值，即没有指定光标
2．effectAllowed属性
取值 copy link move copyLink copyMove linkMove all none uninitialized
说明 允许执行复制操作 将源对象链接到目的地 将源对象移动到目的地 可以是copy或link，取决于目标对象的缺省值 可以是copy或move，取决于目标对象的缺省值 可以是link或move，取决于目标对象的缺省值 允许所有数据传输操作 没有数据传输操作，即放开（drop）是不执行任何操作 默认值，表明没有为effectAllowed属性设置值，执行缺
draggable="true" /> </body> </html>
5.1.3 拖放事件
事件 dragstart dragenter
dragover Dragleave
Drag Drop Dragend
说明
开始拖对象时触发
当对象第一次被拖动到目标对 象上时触发，同时表示该目标 对象允许执行“放”的动作 当对象拖动到目标对象时触发
5.2 传递拖拽数据
5.2.1 dataTransfer对象的属性 5.2.2 dataTransfer对象的方法
5.2.1 dataTransfer对象的属性
1．dropEffect属性 2．effectAllowed属性
1．dropEffect属性
取值
说明
copy
显示copy光标
link
对象中的所有数据。
5.3 HTML5拖放的实例
5.3.1 拖放HTML元素 5.3.2 拖放文件
5.3.1 拖放HTML元素
【例5-2】 在网页中定义一个可拖放的图片 ，代码如下：
<img id="drag1" src="cat.bmp" draggable="true" ondragstart="drag(event)" />
拖放事件的处理函数
在定义元素时，可以指定拖放事件的处理函数。例如，在网页中 定义一个可拖放的图片，并指定其dragstart事件的处理函数为 drag(event)代码如下：
<img src="Water lilies.jpg" draggable="true" ondragstart="drag(event)" />
<script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载，避免网页失去
响应。但是IE不支持这个属性，只支持defer。但这只 是加载require.js，可以使用下面的代码指定要加载 的用户自定义js脚本。 <script src="js/require.js" datamain="js/main"></script>
当开始拖对象时，触发ondragstart事件，处 理函数为drag()，代码如下：
function drag(ev) { ev.dataTransfer.set
定义一个div元素
定义一个div元素，用于接收被拖动的img元素 ，代码如下：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">< /div>
当对象拖动到div元素时触发dragover事件， 处理函数为allowDrop()，代码如下：
function allowDrop(ev) { ev.preventDefault(); }
Drop事件的处理函数
当对象被放开时会触发Drop事件，处理函数为drop() ，代码如下：
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElemen
在拖动过程中，当被拖动对象 离开目标对象时触发 每当对象被拖动时就会触发
每当对象被放开时就会触发
在拖放过程，松开鼠标时触发
作用对象 被拖动对象 目标对象
当前目标对象 先前目标对象
被拖动对象 当前目标对象 被拖动对象
拖放事件被触发的顺序
dragstart→dragenter →dragover→drop→d ragend
5.1.2 设置元素为可拖放
首先要定义使网页中的元素可以被拖放，可以通过将 元素的draggable属性设置为true实现此功能。
【例5-1】 在网页中定义一个可拖放的图片，代码如 下：
<!DOCTYPE html> <html> <body> <img src="Water lilies.jpg"
在主模块中可以使用require()指定require.js加载的js 脚本
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
参数sdataformat是指定数据格式的字符串 ，可以是下面的值：
Text，以文本格式获取数据。 URL，以URL格式获取数据。 getData()方法的返回值是从dataTransfer
对象中获取的数据。
2．setData ()方法
setData ()方法用于以指定的格式设置dataTransfer对象 中的数据，语法如下： bsuccess = object.setdata(sdataformat, sdata) 参数sdataformat是指定数据格式的字符串，可以是下面的 值： Text，以文本格式保存数据。 URL，以URL格式保存数据。 参数sdata是指定要设置的数据的字符串。 如果设置数据成功，则setData ()方法返回True；否则返 回False。
5.2.2 dataTransfer对象的方法
1．getData()方法 2．setData ()方法 3．ClearData()方法
1．getData()方法
getData()方法用于从dataTransfer对象中 以指定的格式获取数据，语法如下：
sretrievedata = object.getdata(sdataformat)
HTML5基础教程（第2版）
授课教师： 职务：
第5章 HTML5拖放
课程描述
拖放是一种常见的操作， 也就是用鼠标抓取一个对 象，将其拖放到另一个位 置。例如，在Windows中， 可以将一个对象拖放到回 收站中。过去，在Web应用 程序中实现拖放的应用并 不多。在 HTML5 中，拖放 已经是标准的一部分，任 何元素都能够拖放。可以 拖放网页中的元素，也可 以从桌面拖放到网页中。 应用拖放特性实现的网页 将更新颖、更方便，比如 直接从桌面向网页中拖放 文件以上传文件。
dropArea. hover的CSS样式代码
#dropArea.hover { background-color: yellow;
} 默认的dropArea的CSS样式代码如下： #dropArea {
width:150px; height: 20px; padding:10px; border:3px solid #ff0000; background-color: #EEEEEE; }
3．ClearData()方法
ClearData()方法用于从dataTransfer对象中删除数 据，语法如下：
pret = object.cleardata( [sdataformat]) 参数sdataformat是指定要删除的数据格式的字符串
，可以是下面的值： Text，删除文本格式数据。 URL，删除URL格式数据。 File，删除文件格式数据。 HTML，删除HTML格式数据。 Image，删除图像格式数据。 如果不指定参数sdataformat，则清空dataTransfer
（1）被拖拽的数据。这可以是多种不同格式的数据，例如，包含 字符串数据的文本对象。
（2）在拖拽过程中显示在鼠标指针旁边的反馈图像。用户可以自 定义此图像，但大多数时候只能使用默认图像。默认图像将基于 按下鼠标时鼠标指针指向的元素。
（3）运行的拖拽效果。可以是以下3种拖拽效果： copy，指被拖拽的数据将从当前位置复制到放开的位置； move，指被拖拽的数据将从当前位置移动到放开的位置； link，指在源位置和放开的位置之间将建立某种关系或连接。
drag(event)函数的格式如下： <script type="text/javascript"> function drag(ev) {
// 处理dragstart事件的代码 } </script> 每个拖放事件的处理函数都有一个Event对象作为参数。Event 对
象代表事件的状态，比如发生事件中的元素、键盘按键的状态、 鼠标的位置、鼠标按钮的状态。
Drop事件的处理函数
当文件被放开时会触发Drop事件，处理函数为drop()，代码如下： function drop(ev) {
ev.preventDefault(); document.getElementById('dropArea').className = ""; document.getElementById('fileinfo').innerHTML = " 共选择了" + ev.dataTransfer.files.length.toString() + " 个文件"; for(var i=0;i< ev.dataTransfer.files.length;i++) {
5.4 在 Vue .js中实现拖拽功能
5.4.1 5.4.2 5.4.3
组件
5.4.4
require.js 注册vuedraggable.js组件 在HTML中使用vuedraggable.js
应用实例
5.4.1 require.js
为了避免在加载require.js时造成网页失去响应，可 以在网页的底部添加如下代码，引用require.js：
本章知识点
5.1 5.2 5.3 5.4
概述 传递拖拽数据 HTML5拖放的实例 在 Vue .js中实现拖拽功能
5.1 概述
5.1.1 什么是拖放 5.1.2 设置元素为可拖放
5.1.3 拖放事件
5.1.1 什么是拖放
拖放可以分为两个动作，即拖拽（drag）和放开（drop）。拖拽 就是移动鼠标到指定对象，按下左键，然后拖动对象；放开就是 放开鼠标左键，放下对象。当开始拖拽时，可以提供如下信息：
tById(data)); } 程序首先阻止事件的默认动作，然后从ataTransfer对
象中以文本格式获取拖动对象时保存的拖动的HTML元 素的ID。
浏览【例5-2】的界面
wenku.baidu.com
5.3.2 拖放文件
本节介绍一个拖放文件的实例。被拖放的文件 对象保存在event. dataTransfer.files中， 可以同时拖动多个文件。
document.getElementById('fileinfo').innerHTML += "<br>文件名:" + ev.dataTransfer.files[i].name + "; 文件大小:"+ev.dataTransfer.files[i].size + "字节"; } }
使用【例5-3】拖放文件的页面
【例5-3】
在网页中定义一个div元素，用于接收被拖动的文件，代码如下 ：
<div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">请把文件拖放到这 </div>
当对象拖动到div元素时触发dragover事件，处理函数为 allowDrop()，代码如下：
function allowDrop(ev) { ev.preventDefault(); document.getElementById('dropArea').className =
'hover'; } 程序阻止了事件的默认动作，并将div元素dropArea的ClassName
设置为'hover'，这是为了在对象拖动到div元素时改其背景色。
显示link光标
move
显示move光标
none
默认值，即没有指定光标
2．effectAllowed属性
取值 copy link move copyLink copyMove linkMove all none uninitialized
说明 允许执行复制操作 将源对象链接到目的地 将源对象移动到目的地 可以是copy或link，取决于目标对象的缺省值 可以是copy或move，取决于目标对象的缺省值 可以是link或move，取决于目标对象的缺省值 允许所有数据传输操作 没有数据传输操作，即放开（drop）是不执行任何操作 默认值，表明没有为effectAllowed属性设置值，执行缺
draggable="true" /> </body> </html>
5.1.3 拖放事件
事件 dragstart dragenter
dragover Dragleave
Drag Drop Dragend
说明
开始拖对象时触发
当对象第一次被拖动到目标对 象上时触发，同时表示该目标 对象允许执行“放”的动作 当对象拖动到目标对象时触发
5.2 传递拖拽数据
5.2.1 dataTransfer对象的属性 5.2.2 dataTransfer对象的方法
5.2.1 dataTransfer对象的属性
1．dropEffect属性 2．effectAllowed属性
1．dropEffect属性
取值
说明
copy
显示copy光标
link
对象中的所有数据。
5.3 HTML5拖放的实例
5.3.1 拖放HTML元素 5.3.2 拖放文件
5.3.1 拖放HTML元素
【例5-2】 在网页中定义一个可拖放的图片 ，代码如下：
<img id="drag1" src="cat.bmp" draggable="true" ondragstart="drag(event)" />
拖放事件的处理函数
在定义元素时，可以指定拖放事件的处理函数。例如，在网页中 定义一个可拖放的图片，并指定其dragstart事件的处理函数为 drag(event)代码如下：
<img src="Water lilies.jpg" draggable="true" ondragstart="drag(event)" />
<script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载，避免网页失去
响应。但是IE不支持这个属性，只支持defer。但这只 是加载require.js，可以使用下面的代码指定要加载 的用户自定义js脚本。 <script src="js/require.js" datamain="js/main"></script>
当开始拖对象时，触发ondragstart事件，处 理函数为drag()，代码如下：
function drag(ev) { ev.dataTransfer.set
定义一个div元素
定义一个div元素，用于接收被拖动的img元素 ，代码如下：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">< /div>
当对象拖动到div元素时触发dragover事件， 处理函数为allowDrop()，代码如下：
function allowDrop(ev) { ev.preventDefault(); }
Drop事件的处理函数
当对象被放开时会触发Drop事件，处理函数为drop() ，代码如下：
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElemen
在拖动过程中，当被拖动对象 离开目标对象时触发 每当对象被拖动时就会触发
每当对象被放开时就会触发
在拖放过程，松开鼠标时触发
作用对象 被拖动对象 目标对象
当前目标对象 先前目标对象
被拖动对象 当前目标对象 被拖动对象
拖放事件被触发的顺序
dragstart→dragenter →dragover→drop→d ragend
5.1.2 设置元素为可拖放
首先要定义使网页中的元素可以被拖放，可以通过将 元素的draggable属性设置为true实现此功能。
【例5-1】 在网页中定义一个可拖放的图片，代码如 下：
<!DOCTYPE html> <html> <body> <img src="Water lilies.jpg"
在主模块中可以使用require()指定require.js加载的js 脚本
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
参数sdataformat是指定数据格式的字符串 ，可以是下面的值：
Text，以文本格式获取数据。 URL，以URL格式获取数据。 getData()方法的返回值是从dataTransfer
对象中获取的数据。
2．setData ()方法
setData ()方法用于以指定的格式设置dataTransfer对象 中的数据，语法如下： bsuccess = object.setdata(sdataformat, sdata) 参数sdataformat是指定数据格式的字符串，可以是下面的 值： Text，以文本格式保存数据。 URL，以URL格式保存数据。 参数sdata是指定要设置的数据的字符串。 如果设置数据成功，则setData ()方法返回True；否则返 回False。