1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>每天一个JavaScript实例-html5拖拽</title>
  6. <style>
  7. #drop{
  8. 		width:300px;
  9. 		height:200px;
  10. 		background-color:#f00;
  11. 		padding:5px;
  12. 		border:2px solid #000;
  13. 	}
  14. #item{
  15. 	width:100px;
  16. 	height:100px;
  17. 	background-color:#ff0;
  18. 	padding:5px;
  19. 	margin:20px;
  20. 	border:1px solid #000;
  21. 	}
  22. *[draggable=true]{
  23. 	-moz-user-select:none;
  24. 	-khtml-user-drag:element;
  25. 	cursor:move;
  26. 	}
  27. *:-khtml-drag{
  28. 		background-color:rgba(238,238,238,0.5);
  29. 	}
  30. </style>
  31. <script>
  32.  
  33. function listenEvent(eventTarget,eventType,eventHandler){
  34.  
  35. 	if(eventTarget.addEventListener){
  36. 		eventTarget.addEventListener(eventType,eventHandler,false);
  37.  
  38. 		}else if(eventTarget.attachEvent){
  39. 			eventType = "on" + eventType;
  40. 			eventTarget.attachEvent(eventType,eventHandler);
  41.  
  42. 			}else{
  43. 				eventTarget["on" + eventType] = eventHandler;
  44.  
  45. 				}
  46. 	}
  47.  
  48. 	//取消事件
  49. 	function cancelEvent (event){
  50. 		console.log("取消事件");
  51. 		if(event.preventDefault){
  52. 				event.preventDefault();
  53. 			}else{
  54. 					event.returnValue = false;
  55. 				}
  56. 		}
  57. 		//取消传递
  58. 		function cancelPropagation(event){
  59. 			console.log("取消传递");
  60. 			if(event.stopPropagation){
  61. 					event.stopPropagation();
  62. 				}else{
  63. 						event.cancelBubble = true;
  64. 					}
  65.  
  66. 			}
  67. 		function dragOver(evt){
  68. 		console.log("拖拽进入区域");
  69. 			if(evt.preventDefault)
  70. 			evt.preventDefault();
  71. 			evt = evt || window.event;
  72. 			evt.dataTransfer.dropEffect = 'copy';
  73. 			return false;
  74. 		}
  75. 	window.onload = function(){
  76. 			console.log("程序就绪");
  77.  
  78. 			//console.log(target);
  79. 			var item = document.getElementById("item");
  80.  
  81. 			item.setAttribute("draggable","true");
  82. 			//console.log(item);
  83. 			listenEvent(item,"dragstart",function(evt){
  84. 				console.log("拖拽開始");
  85. 				evt = evt || window.event;
  86. 				evt.dataTransfer.effectAllowed = 'copy';
  87. 				evt.dataTransfer.setData("Text",item.id);
  88.  
  89. 				});
  90. 			var target = document.getElementById("drop");
  91. 			listenEvent(target,"dragenter",cancelEvent);
  92. 			listenEvent(target,"dragover",dragOver);
  93. 			listenEvent(target,"drop",function(evt){
  94. 				console.log("drop");
  95. 					cancelPropagation(evt);
  96. 					evt = evt || window.event;
  97. 					evt.dataTransfer.dropEffect = 'copy';
  98. 					var id = evt.dataTransfer.getData("Text");
  99. 					target.appendChild(document.getElementById(id));
  100. 					});
  101.  
  102. 		};
  103.  
  104. </script>
  105. </head>
  106.  
  107. <body>
  108.  
  109. <div>
  110. <p>Drag the small yellow box with hte dash border to the larger red box with the solid border</p>
  111. </div>
  112. <div id = "item" draggable = "true">
  113. </div>
  114. <div id = "drop">
  115. </div>
  116. </body>
  117. </html>

每天一个JavaScript实例-html5拖拽的更多相关文章

  1. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  2. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  5. html5拖拽实现

    1.需求 做一个h5正方形的拖拽框 2.分析 使用touchstart,touchmove,touchend这3个事件实现. 需要记录的数据有三组数据,分别是下图的(x0,y0),(x1,y1),(x ...

  6. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  7. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. POJ3436 ACM Computer Factory 【最大流】

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5412   Accepted: 1 ...

  2. C# 它 抽象类和接口

    抽象类 C#同意把类和方法声明为abstract,即抽象类和抽象方法.抽象类通常代表一个抽象概念,它提供一个继承的出发点,当设计一个新的对象类时,一定是用来继承的,所以,在一个以继承关系形成的等级结构 ...

  3. 有没有安全的工作？（99条评论）——结论是没有一劳永逸的工作，要终身学习，IT业刚出道和老手还是有区别的（同样对于新技术，薪资可能是个问题）

    作者: 阮一峰 日期: 2015年12月15日 如果你经常使用互联网,可能知道有一种东西叫做Flash. 它是一种软件,用来制作网页游戏.动画,以及视频播放器.只要观看网络视频,基本都会用到它. 七八 ...

  4. iPhone App开发实战手册学习笔记（9）之设计IOS App的目标

    1 前言 如果我们要做一个属于自己的App需要达到那些目标呢,今天就来介绍一下. 2 详述 2.1 关注用户及其需求 你的主要目标永远都是在设计方案之前先想好用户用例.有些开发人员喜欢编写用户故事来确 ...

  5. VC 绘图技巧--自定义形状图形

    自定义形状图形,定义几个点围城的图形,然后进行描边和填充: if (m_memDC.m_hDC!=NULL) { CPoint point[4]; point[0].x=nLeft+(int)(0.1 ...

  6. Guava学习笔记：EventBus（转）

    EventBus是Guava的事件处理机制,是设计模式中的观察者模式(生产/消费者编程模型)的优雅实现.对于事件监听和发布订阅模式,EventBus是一个非常优雅和简单解决方案,我们不用创建复杂的类和 ...

  7. Linux Shell 之 Shell中的函数调用

    说起函数调用,相信大家也不会陌生,然而对于初学Shell的我来说,Shell中函数调用方式却有点让我不太习惯,自己也走了不少的弯路,因为传递参数时出了一个很“自然”的错误,也让我吃了不少的苦头,所以总 ...

  8. 忽然想到：把Mu的源代码一网打尽

    那么那些流媒体开发的公司,就不会拒绝我了,真是一举两得.

  9. Delphi中WebBrowser自动填表模板

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  10. VC调试篇

    难怪很多前辈说调试是一个程序员最基本的技能,其重要性甚至超过学习一门语言.不会调试的程序员就意味着他即使会一门语言,却不能编制出任何好的软件. 我以前接触的程序大多是有比较成形的思路和方法,调试起来出 ...