《HTML5基础开发教程 教学课件 ppt 作者 范立锋 于合龙 孙丰伟 第06章__HTML5的元素拖拽 》由会员分享，可在线阅读，更多相关《HTML5基础开发教程 教学课件 ppt 作者 范立锋 于合龙 孙丰伟 第06章__HTML5的元素拖拽 （5页珍藏版）》请在金锄头文库上搜索。
1、第6章 HTML5的元素拖拽,6.1 HTML5拖拽实现方式,6.2 dataTransfer对象,6.1 HTML5拖拽实现方式,在HTML5中将元素的“draggable”属性设置为“true”后，对应的元素就可以被拖拽了。拖拽元素将触发一系列的事件，如下表所示,6.2 dataTransfer对象,在HTML5中，dataTransfer对象专门用于处理拖拽过程中产生的数据信息，该对象的属性及说明如下表所示,dataTransfer对象常用方法包括 （1）setData(format, data)，该方法将指定类型的数据信息存入dataTransfer对象，参数format表示保存的数据
2、类型，参数data表示数据内容。应用实例如下 src.ondragstart = function (e) /开始拖拽元素时触发 e.dataTransfer.setData(“Text“, e.target.id); /使用dataTransfer保存拖拽元素ID msg.innerHTML=“开始拖拽：“+draggedID; （2）getData(format)，该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。应用实例如下 target.ondrop = function (e) /在目的元素内释放拖拽元素时触发 var droppe
3、dID = e.dataTransfer.getData(“Text“); /从dataTransfer中获取拖拽元素ID var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = “; target.appendChild(newElem); e.preventDefault(); ,（3）clearData(format)，该方法用于从dataTransfer对象中移除指定类型的数据信息，参数format表示移除的数据类型。 （4）setDragImage(image,x,y)
4、，该方法用于设置拖拽过程中鼠标指针显示的图标，当没有显示调用setDragImage方法进行设置时，拖拽图标将使用默认样式。参数image用于设定拖拽图标的图像元素，x用于设定图标与鼠标指针在x轴方向的距离，y用于设定图标与鼠标指针在y轴方向的距离。应用实例如下 src.ondragstart = function (e) /开始拖拽元素时触发 draggedID = e.target.id; /获取拖拽对象ID var img = document.createElement(“img“); img.src = “ico.jpg“; e.dataTransfer.setDragImage(img,-10,-10); msg.innerHTML=“开始拖拽：“+draggedID ; ,
