• 提升品牌形象
  • 最新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-2 元素在拖放过程中触发的事件

实例11-2 元素在拖放过程中触发的事件

1.功能描述

在新建的HTML页面中,分别使用<div>元素添加两个区域,一个是ID号为“divDrag”的拖放元素,另一个是ID号为“divArea”的目标元素。当用户将“divDrag”元素拖放到目标元素“divArea”时,在页面中将显示所触发的重要事件状态。

2.实现代码

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

代码清单11-2 元素在拖放过程中触发的事件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>元素在拖放过程中触发的事件</title>
	<link href="Css/cssll.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	       src="Js/js2.js"/>
	</script>
	</head>
	<body onLoad="pageload();">
	  <div class="wPub">
	    <div class="wPub">
	      <div id="divDrag" draggable="true"></div>
	      <div id="divTips"></div>
	    </div>
	    <div id="divArea"></div>
	  </div>
	</body>
	</html>

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

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	//自定义加载页面时调用的函数
	function pageload(){
	    var rag=$$("divDrag");
	    varArea=$$("divArea");
	    //添加被拖放元素的dragstart事件
	    Drag.addEventListener("dragstart",
	    function(e){
	        Status_Handle("元素正在开始拖动...")
	    });
	    //添加目标元素的drop事件
	    Area.addEventListener("drop",
	    function(e){
	        Status_Handle("元素拖入成功!")
	    });
	    //添加目标元素的dragleave事件
	    Area.addEventListener("dragleave",
	    function(e){
	        Status_Handle("拖动元素正在离开...")
	    });
	}
	//自定义显示执行过程中状态的函数
	function Status_Handle(message){
	    $$("divTips").innerHTML+=message+"<br>";
	}
	//添加页面的dragover事件
	document.ondragover=function(e){
	   //阻止默认方法,取消拒绝被拖放
	   e.preventDefault();
	}
	//添加页面drop事件
	document.ondrop=function(e){
	   //阻止默认方法,取消拒绝被拖放
	   e.preventDefault();
	}

3.页面效果

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

图11-2 在页面中显示元素在拖放过程中触发的事件

4.源码分析

在本实例中,首先,将拖放元素“divDrag”的“draggable”属性值设置为“true”,同时,添加页面的dragover与drop事件。在这两个事件中,都使用e.preventDefault()方法取消页面的默认值,允许拖放页面。由于在拖放元素的过程中,首先被拖放的是页面,如果页面都不可以拖放,那么页面中的元素也将不可被拖放。

接下来,分别为拖放元素“divDrag”和目标元素“divArea”添加dragstart事件和drop、dragleave事件。在添加的这些事件中,通过调用自定义的函数Status_Handle(),在页面中显示事件触发时的各种状态值。

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


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

  • QQ在线客服

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

    4000-555-94113099998627
  • 联系地址

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