|
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”代码修改了拖放成功后的回收站的样式，完整的实现过程如代码中加粗部分所示。 |
