1.功能描述 在新建的HTML页面中,以列表的方式展示相册中的3张图片,用户可以选中任意一张,按住鼠标,以拖动的方式放入右下角的回收站中。拖放成功后,将在页面中显示删除图片的.记录数;同时,回收站的样式也发生了相应的变化。 2.实现代码 在DreamweaverCS5中新建一个HTML页面ll-7.html,加入代码如代码清单11-7所示。 代码清单11-7 使用拖放API将图片拖入回收站 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title〉使用拖放API将图片拖入回收站</title> <link href="Css/css11.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="Js/js7.jsn/> </script> </head> <body onLoad="pageload();"> <divc lass="wPub"> <ul> <li class="liF" id="liOl"> <img src="Images/img08.jpg" class="img95" draggable="true"> </li> <li class="liF" id="li02"> <img src=”Images/imgO9.jpg" class="img95" draggable="true"> </li> </ul> <p id="pStatus"></p> <div id="divRecycle" class="EmptRyl"></div> </div> </body> </html> 在代码清单11-7中,页面导入一个JavaScript文件js7.js,其中自定义一个函数pageloadO,在页面加载时调用,其实现的代码如下所示: //JavaScript Document function $$(id){ return document.getElementByld(id); } var intDeleNum=0; //自定义页面加载时调用的函数 function pageload(){ //获取全部的图片信息 var Drag=document.getElementsByTagName("li"); //遍历每一个图片元素 for(var intI=0;intI<Drag.length;intI++){ //为每一个图片元素添加被拖放元素的dragstart事件 Drag[intI].addEventListener("dragstart", function(e){ var objDtf=e.dataTransfer; objDtf.setData("text/plain",this.id); }, false); } var Recy=$$("divRecycle"); //添加目标元素的drop事件 Recy.addEventListener("drop", function(e){ var objDtf=e.dataTransfer; var intVal=objDtf.getData("text/plain"); Drop_Event(intVal); Recy.className="HaveRyl"; }, false); } //添加页面的dragover事件 document.ondragover=function(e){ //阻止默认方法,取消拒绝被拖放 e.preventDefault(); } //添加页面drop事件 document.ondrop=function(e){ //阻止默认方法,取消拒绝被拖放 e.preventDefault(); } //自定义图片成功被拖入回收站时调用的函数 functionDrop_Event(Id){ var Node=$$(Id); Node.parentNode.removeChild(Node); intDeleNum++; $$("pStatus").style.display="block"; $$("pStatus").innerHTML="已成功删除"+intDeleNum+"张图片"; } 3.页面效果 该页面在Chrome10浏览器中执行的效果如图11-7所示。
图11-7 使用拖放API将图片拖入回收站 4.源码分析 在本实例中,首先,使用getElementsByTagName()方法获取全部相册中的元素,_然后,遍历全部元素,为每一个图片元素添加拖动时触发的“dragstart”事件。在该事件中,通过调用dataTransfer对象存入每一个图片元素对应的ID号,即this.id值。 在回收站元素的接收事件“drop”中,调用dataTransfer对象读取存入的单个图片元素的ID号,将该ID号作为实参,调用自定义的函数Drop_Event()。在该函数中,先根据传回的ID号值,通过removeChild()方法移除相册中的指定图片,形成删除的效果;同时,通过全局变量intDeleNum累计删除图片的总量,并将该总量值显示在页面中。通过传回的ID号完成对函数Drop_Event()的调用,还通过“Recy.className”代码修改了拖放成功后的回收站的样式,完整的实现过程如代码中加粗部分所示。 |