<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-html5拖拽</title>

<style>

#drop{

		width:300px;

		height:200px;

		background-color:#f00;

		padding:5px;

		border:2px solid #000;

	}

#item{

	width:100px;

	height:100px;

	background-color:#ff0;

	padding:5px;

	margin:20px;

	border:1px solid #000;

	}

*[draggable=true]{

	-moz-user-select:none;

	-khtml-user-drag:element;

	cursor:move;

	}

*:-khtml-drag{

		background-color:rgba(238,238,238,0.5);

	}

</style>

<script>

function listenEvent(eventTarget,eventType,eventHandler){

	if(eventTarget.addEventListener){

		eventTarget.addEventListener(eventType,eventHandler,false);

		}else if(eventTarget.attachEvent){

			eventType = "on" + eventType;

			eventTarget.attachEvent(eventType,eventHandler);

			}else{

				eventTarget["on" + eventType] = eventHandler;

				}

	}

	//取消事件

	function cancelEvent (event){

		console.log("取消事件");

		if(event.preventDefault){

				event.preventDefault();

			}else{

					event.returnValue = false;

				}

		}

		//取消传递

		function cancelPropagation(event){

			console.log("取消传递");

			if(event.stopPropagation){

					event.stopPropagation();

				}else{

						event.cancelBubble = true;

					}

			}

		function dragOver(evt){

		console.log("拖拽进入区域");

			if(evt.preventDefault)

			evt.preventDefault();

			evt = evt || window.event;

			evt.dataTransfer.dropEffect = 'copy';

			return false;

		}

	window.onload = function(){

			console.log("程序就绪");

			//console.log(target);

			var item = document.getElementById("item");

			item.setAttribute("draggable","true");

			//console.log(item);

			listenEvent(item,"dragstart",function(evt){

				console.log("拖拽開始");

				evt = evt || window.event;

				evt.dataTransfer.effectAllowed = 'copy';

				evt.dataTransfer.setData("Text",item.id);

				});

			var target = document.getElementById("drop");

			listenEvent(target,"dragenter",cancelEvent);

			listenEvent(target,"dragover",dragOver);

			listenEvent(target,"drop",function(evt){

				console.log("drop");

					cancelPropagation(evt);

					evt = evt || window.event;

					evt.dataTransfer.dropEffect = 'copy';

					var id = evt.dataTransfer.getData("Text");

					target.appendChild(document.getElementById(id));

					});

		};

</script>

</head>

<body>

<div>

<p>Drag the small yellow box with hte dash border to the larger red box with the solid border</p>

</div>

<div id = "item" draggable = "true">

</div>

<div id = "drop">

</div>

</body>

</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. Android - 设置adb的usb连接配置

    设置adb的usb连接配置 本文地址: http://blog.csdn.net/caroline_wendy 把须要測试的手机连接入电脑.通过系统查找USB连接配置,找到厂商ID: 把ID加入进ad ...

  2. 日本IT工作有感

    不知不觉,在日本关西已经呆了快一个月了. 除了饮食有点不是非常习惯.其他感觉都还好. 日本这边的文化还是非常偏向project师的,project师的社会地位非常高,公司里面也没有国内所谓35岁的焦虑 ...

  3. 关于SIGSLOT的一个简单的程序

    废话少说直接看代码即可,这只是一个简单的程序,可以帮我们简单地明白SIGSLOT是怎么回事.至于深入研究自己去百度吧. #include "sigslot.h" using nam ...

  4. [置顶] strcpy和memcpy的区别

    strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容,还会复制字符串的结束符. 已知strcpy函数 ...

  5. c语言指针具体解释

    指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最基本的风格之中的一个.利用指针变量能够表示各种数据结构: 能非常方便地使用数组和字符串: 并能象汇编语言一样处理内存地址,从而编出精练而高 ...

  6. 基于Apriori算法的Nginx+Lua+ELK异常流量拦截方案 郑昀 基于杨海波的设计文档（转）

    郑昀 基于杨海波的设计文档 创建于2015/8/13 最后更新于2015/8/25 关键词:异常流量.rate limiting.Nginx.Apriori.频繁项集.先验算法.Lua.ELK 本文档 ...

  7. Java线程并发中常见的锁--自旋锁 偏向锁

    随着互联网的蓬勃发展,越来越多的互联网企业面临着用户量膨胀而带来的并发安全问题.本文着重介绍了在java并发中常见的几种锁机制. 1.偏向锁 偏向锁是JDK1.6提出来的一种锁优化的机制.其核心的思想 ...

  8. SharePoint场管理-PowerShell（二）

    1. 合并Log文件 Merge-SPLogFile –Path E:\Logs\MergedLog.log –StartTime "1/19/2010" –Overwrite 2 ...

  9. js中获取jsp中的参数

    碰到一个问题需要再js中根据jsp中request的参数判断执行那段代码 第一种写法: if('${method}'=="add"){js代码段1}else{js代码段2} 第二种 ...

  10. HttpClient使用详解

    http://itindex.net/detail/52566-httpclient HttpClient使用详解 标签: httpclient | 发表时间:2015-01-22 12:07 | 作 ...