• 提升品牌形象
  • 最新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-6 使用拖放API将商品拖入购物车

实例11-6 使用拖放API将商品拖入购物车

1.功能描述

在新创建的HTML页面中展示4件图书商品,用户可以选中其中的任意一件,按住鼠标,以拖放的方式将选择的商品放入购物车中;同时,购物车接收拖来的商品数据,自动增加一条选择记录,并显示商品的基本信息。

2.实现代码

在DreamweaverCS5中新建一个HTML页面ll-6.html,加人代码如代码清单11-6所示。

代码清单11-6 使用拖放API将商品拖入购物车

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>使用拖放API将商品拖入购物车</title>
	<link href="Css/cssll.cs" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	        src="Js/js6.js"/>
	</script〉
	</head>
	<body onLoad="pageload();">
	  <ul>
	    <li class="liF">
	        <img src="Images/imgO2.jpg"id="img02"
	             alt="42" title="2006作品" draggab1e="true">
	    </li>
	    <li class="liF">
	        <img src="Images/imgO3.jpg" id="img03"
	             alt="56" title="2008作品" draggable="true">
	    </li>
	    <li class="liF">
	        <img src="Images/img04.jpg" id=11img04"
	             alt="52" title="2010作品" draggable="true">
	    </li>
	    <li class="liF">
	        <img src="Images/img05.jpg" id="img05"
	             alt="59" title="2011作品" draggable="true">
	    </li>
	</ul>
	<ul id="ulCart">
	  <liclass="liT">
	       <span>书名</span>
	       <span>定价</span>
	       <span>数量</span>
	       <span>总价</span>
	    </li>
	  </ul>
	</body>
	</html>

在代码清单11-6中,页面导入一个JavaScript文件js6.js,其中自定义一个函数pageload(),在页面加载时调用,其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	//自定义页面加载时调用的函数
	function pageload(){
	    //获取全部的图书商品
	    var Drag=document.getElementsByTagName("img");
	    //遍历每一个图书商品
	    for(varinti=0;inti<Drag.length;intl++){
	        //为每一个商品添加被拖放元素的dragstart事件
	        Drag[inti].addEventListener("dragstart",
	        function(e){
	            var objDtf=e.dataTransfer;
	            objDtf.setData("text/html",addCart(this.title,this.alt,1));
	        },
	        false);
	    }
	    var Cart=$$("ulCart");
	    //添加目标元素的drop事件
	    Cart.addEventListener("drop",
	    function(e){
	        var objDtf=e.dataTransfer;
	        var strHTML=objDtf.getData("text/html");
	        Cart.innerHTML+=strHTML;
	        e.preventDefault();
	        e.stopPropagation();
	    },
	    false);
	}
	//添加页面的dragover事件
	document.ondragover=function(e){
	    //阻止默认方法,取消拒绝被拖放
	    e.preventDefault();
	}
	//添加页面drop事件
	document.ondrop=function(e){
	    //阻止默认方法,取消拒绝被拖放
	    e.preventDefault();
	}
	//自定义向购物车中添加记录的函数
	functionaddCart(a,b,c){
	    var strHTML="<li class='liC'>";
	    strHTML+="<span>"+a+"</span>";
	    strHTML+="<span>"+b+"</span>";
	    strHTML+="<span>"+c+"</span>";
	    strHTML+="<span>"+b*c+"</span>";
	    StrHTML+="</li>";
	    return istrHTML;
	}

3.页面效果

该页面在Chrome10浏览器中执行的效果如图11-6所示。

图11-6 使用拖放API将商品拖入购物车

4.源码分析

在本实例中,为了使所有的图书商品都具有可拖放的功能,首先在HTML页面中,为每个商品元素添加一个“draggable”属性,并将该属性的值设为“true”,表示允许拖放s

为了在JavaScript代码中,给每,个商品元素添加“dragstart”事件,先使用getElementsByTagNameO方法获取全部的商品元素;然后,采用遍历的方式,为每个商品元素添加一个“dragstart”事件。在该事件中,调用自定义的函数addCart(),将商品的基本信息组成一段HTML代码格式数据,存入dataTransfer对象中,用于购物车中的接收。

在购物车中,通过访问dataTransfer对象,读取存入的某个商品的数据信息,即一段HTML代码,将该代码追加至购物车元素的imierHTML属性中,从而实现购物车中新增一条选择记录的效果。完整的实现过程如代码中加粗部分所示。

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


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

  • QQ在线客服

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

    4000-555-94113099998627
  • 联系地址

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