• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例11-7 使用拖放API将图片拖入回收站

实例11-7 使用拖放API将图片拖入回收站

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

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101