HTML5程序设计-HTML5拖放

显示link光标
move
显示move光标
none
默认值，即没有指定光标
2．effectAllowed属性
取值 copy link move copyLink copyMove linkMove all none uninitialized
说明 允许执行复制操作 将源对象链接到目的地 将源对象移动到目的地 可以是copy或link，取决于目标对象的缺省值 可以是copy或move，取决于目标对象的缺省值 可以是link或move，取决于目标对象的缺省值 允许所有数据传输操作 没有数据传输操作，即放开（drop）是不执行任何操作 默认值，表明没有为effectAllowed属性设置值，执行缺
省的拖放操作
5.2.2 dataTransfer对象的方法
1．getData()方法 2．setData ()方法 3．ClearData()方法
1．getData()方法
getData()方法用于从dataTransfer对象中 以指定的格式获取数据，语法如下：
sretrievedata = object.getdata(sdataformat)
当开始拖对象时，触发ondragstart事件，处 理函数为drag()，代码如下：
function drag(ev) { ev.dataTransfer.set
定义一个div元素
定义一个div元素，用于接收被拖动的img元素 ，代码如下：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">< /div>
tById(data)); } 程序首先阻止事件的默认动作，然后从ataTransfer对
象中以文本格式获取拖动对象时保存的拖动的HTML元 素的ID。
浏览【例5-2】的界面
5.3.2 拖放文件
本节介绍一个拖放文件的实例。被拖放的文件 对象保存在event. dataTransfer.files中， 可以同时拖动多个文件。
【例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元素时改其背景色。
draggable="true" /> </body> </html>
5.1.3 拖放事件
事件 dragstart dragenter
dragover Dragleave
Drag Drop Dragend
说明
开始拖对象时触发
当对象第一次被拖动到目标对 象上时触发，同时表示该目标 对象允许执行“放”的动作 当对象拖动到目标对象时触发
在拖动过程中，当被拖动对象 离开目标对象时触发 每当对象被拖动时就会触发
每当对象被放开时就会触发
在拖放过程，松开鼠标时触发
作用对象 被拖动对象 目标对象
当前目标对象 先前目标对象
被拖动对象 当前目标对象 被拖动对象
拖放事件被触发的顺序
dragstart→dragenter →dragover→drop→d ragend
在主模块中可以使用require()指定require.js加载的js 脚本
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
3．ClearData()方法
ClearData()方法用于从dataTransfer对象中删除数 据，语法如下：
pret = object.cleardata( [sdataformat]) 参数sdataformat是指定要删除的数据格式的字符串
，可以是下面的值： Text，删除文本格式数据。 URL，删除URL格式数据。 File，删除文件格式数据。 HTML，删除HTML格式数据。 Image，删除图像格式数据。 如果不指定参数sdataformat，则清空dataTransfer
拖放事件的处理函数
在定义元素时，可以指定拖放事件的处理函数。例如，在网页中 定义一个可拖放的图片，并指定其dragstart事件的处理函数为 drag(event)代码如下：
<img src="Water lilies.jpg" draggable="true" ondragstart="drag(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++) {
document.getElementById('fileinfo').innerHTML += "<br>文件名:" + ev.dataTransfer.files[i].name + "; 文件大小:"+ev.dataTransfer.files[i].size + "字节"; } }
使用【例5-3】拖放文件的页面
（1）被拖拽的数据。这可以是多种不同格式的数据，例如，包含 字符串数据的文本对象。
（2）在拖拽过程中显示在鼠标指针旁边的反馈图像。用户可以自 定义此图像，但大多数时候只能使用默认图像。默认图像将基于 按下鼠标时鼠标指针指向的元素。
（3）运行的拖拽效果。可以是以下3种拖拽效果： copy，指被拖拽的数据将从当前位置复制到放开的位置； move，指被拖拽的数据将从当前位置移动到放开的位置； link，指在源位置和放开的位置之间将建立某种关系或连接。
当对象拖动到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
5.2 传递拖拽数据
5.2.1 dataTransfer对象的属性 5.2.2 dataTransfer对象的方法
5.2.1 dataTransfer对象的属性
1．dropEffect属性 2．effectAllowed属性
1．dropEffect属性
取值
说明
copy
显示copy光标
link
本章知识点
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）。拖拽 就是移动鼠标到指定对象，按下左键，然后拖动对象；放开就是 放开鼠标左键，放下对象。当开始拖拽时，可以提供如下信息：
<script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载，避免网页失去
响应。但是IE不支持这个属性，只支持defer。但这只 是加载require.js，可以使用下面的代码指定要加载 的用户自定义js脚本。 <script src="js/require.js" datamain="js/main"></script>
drag(event)函数的格式如下： <script type="text/javascript"> function drag(ev) {
// 处理dragstart事件的代码 } </script> 每个拖放事件的处理函数都有一个Event对象作为参数。Event 对