<script type="text/javascript" src="./whenReady.js"></script>

<body>

<script type="text/javascript">

whenReady(function(){

	var clock = document.getElementById('clock'); 	//时钟元素

	var icon = new Image();				//用于拖动的图片

	icon.src = "37178802_25568731.jpg";		//图片url

	//每分钟显示一次时间

	function displayTime(){

		var now = new Date();			//获取当前时间

		var hrs = now.getHours(),mins = now.getMinutes();

		if(mins < 10)

			mins = "0"+mins;

		clock.innerHTML = hrs + ":" + mins;  //显示当前时间

		setTimeout(displayTime,60000); 		//一分钟后将再次运行

	}

	displayTime();

	//使时钟能够拖动

	//我们也能通过HTML属性实现这个目的：<span draggable="true">....

	clock.draggable="true";

	//设置拖动时间处理程序

	clock.ondragstart = function(event){

		var event = event || window.event;	//用于IE兼容性

		//dataTransfer属性是拖放API的关键

		var dt = event.dataTransfer;

		//告诉浏览器正在拖动的是什么

		//把Date（）构造函数用做一个返回时间戳字符串的函数

		dt.setData("Text",Date()+"\n");

		//在支持的浏览器中，告诉它拖动图片表现时间戳

		//没有这行代码，浏览器也可以使用时钟文本图像作为拖动的值

		if(dt.setDragImage)

			dt.setDragImage(icon,0,0);

	}

});

/**

 *第二个拖动示例: 作为拖动目标和拖放源的列表

 *

 * DnD API 相当复杂，且浏览器也不完全兼容

 * 这个例子基本正确，但每个浏览器会有一点不同，每个似乎都有自身独有的bug

 * 这些代码不会尝试浏览器特有的解决方案

 */

whenReady(function(){		//当文档准备就绪时运行这个函数

	//查找所有的<ul class='dnd'>元素，并对其调用dnd（）函数

	var lists = document.getElementsByTagName('ul');

	var regexp = /\bdnd\b/;

	for(var i = 0 ; i < lists ; i++ )

		if(regexp.test(lists[i].className))

			dnd(lists[i]);

	//为列表元素添加拖放事件处理程序

	function dnd(list){

		var original_class = list.className; 	//保存原始CSS类

		var entered = 0;						//跟踪进入和离开

		//当拖放对象首次进入列表时调用这个处理程序

		//他会检查拖放对象包含的数据格式他是否能处理

		//如果能，他返回false来表示有兴趣放置

		//在这种情况下，他会高亮拖放目标，让用户知道该兴趣

		list.ondragenter = function(e){

			e = e || window.event; //标准或IE事件

			var from = e.relaterTarget;

			//draenter和dragleave事件冒泡

			//它使得在像<ul>元素由<li>子元素的情况下

			//何时高亮显示或取消高亮显示元素变得棘手

			//在定义relatedTarget的浏览器中，我们能跟踪它

			//否则，我们需要通过冲击进入和离开的次数

			//如果从列表外面进入或第一次进入

			//那么需要做一些处理

			entered++;

			if((from && !isChild(from,list)) || entered ==1){

				//所有的DnD信息都在dataTransfer对象上

				var dt = e.dataTransfer;

				//dt.types对象列出可用的拖放数据的类型或格式

				//HTML 5 定义这个对象有contains（）方法

				//在一些浏览器中，它是一个有indexOf（）方法的数组

				//在IE8以及之前版本中，他根本不存在

				var types = dt.types;	//可用数据格式是什么

				//如果没有任何类型的数据或可用数据是纯文本格式

				//那么高亮显示列表让用户知道我们正在监听拖放

				//同时返回false让浏览器知晓

				if( !types || (types.contains && types.contains("text/plain"))||

					(types.indexOf && types.indexOf("text/plain")!=-1)){

					list.className =original_class + " droppable";

					return false;

				}

				//如果我们无法识别数据类型，我们不希望拖放

				return ;	//没有取消

			}

			return false;	//如果不是第一次进入，我们继续保持兴趣

		};

		//当鼠标指针悬停在列表上是，会调用这个处理程序

		//我们必须定义这个处理程序并返回false，否则这个拖放操作将取消

		list.ondragenter = function(e){return false;};

		//当拖放对象移出列表或从其子元素中移除时，会调用这个处理程序

		//如果我们真正离开这个列表（不是仅仅从一个列表项到另一个）

		//那么取消高亮显示它

		list.ondragleave = function(e){

			e = e || window.event;

			var to = e.relatedTarget;

			//如果我们要到列表以外的元素或打破离开和进入次数的平衡

			//那么取消高亮显示列表

			entered--;

			if((to && !isChild(to,list)) || entered <= 0){

				list.className = original_class;

				entered = 0;

			}

			return false;

		};

		//当实际放置时，会调用这个程序

		//我们会接收放下的文本并将其放到一个新的<li>元素中

		list.ondrop = function(e){

			e = e || window.event;	//获得事件

			//获得放置的纯文本数据

			//“Text”是“text/plain”的昵称

			//IE不支持“text/plain”，所以在这个使用“Text”

			var  dt = e.dataTransfer;		//dataTransfer对象

			var  text = dt.getData("Text");	//获取放置的纯文本数据

			//如果得到一些文本，把它放入列表尾部的新项中

			if(text){

				var item = document.createElement("li");	//创建新<li>

				item.draggable = true;	//使他可以移动

				item.appendChild(document.createTextNode(text)); //添加文本

				list.appendChild(item);		//把它添加列表中

				//恢复列表的原始样式且重置进入次数

				list.className = original_class;

				entered= 0;

				return false;

			}

		};

		//使原始所有列表项都可拖动

		var items = list.getElementsByTagName('li');

		for(var i = 0 ; i<items.length; i++)

			item[i].draggable = true;

		//为拖动列表项注册事件处理程序

		//注意我们把处理程序放在列表上

		//让事件从列表向上冒泡

		//当在列表中开始拖动对象，会调用这个处理程序

		list.ondragstart = function(e){

			var e = e || window.event;

			var target = e.target || e.srcElement;

			//如果他不是从<li>向上冒泡，那么忽略它

			if(target.tagName !=="LI")

				return false;

			//获得最重要的dataTransfer对象

			var dt = e.dataTransfer;

			//设置妥当的数据和数据类型

			dt.setData("Text",target.innerText || target.textContent);

			//设置允许复制和移动这些数据

			dt.effectAllowed = "copyMove";

		};

		//当成功放置后，将调用这个处理程序

		list.ondragend = function(e){

			e = e || window.event;

			var target = e.target || e.srcElement;

			//如果这个拖放操作是move，那么要删除列表项

			//在IE8中，他将是“none”，除非在之前的ondrop处理程序中显示设置它为move

			//但为IE强制设置“move”会阻止其他浏览器给用户选择复制还是移动的机会

			if(e.dataTransfer.dropEffect ==="move")

				target.parentNode.removeChild(target);

			//这是在ondragenter和ondragleave使用的工具函数

			//如果a是b的字元素则返回true

			function isChild(a,b){

				for(;a;a=parentNode)

					if(a === b)

						return true;

				return false;

			}

		}

	}

});

</script>

<style type="text/css">

#clock{

	font:bold 24pt sans;

	background: #ddf;

	padding:10px;

}

</style>

<h1>从时钟中脱出时间戳</h1>

<span id="clock"></span>

<textarea cols="60" rows="20"></textarea>

<h1>这是实例二：作为拖动目标和拖放源的列表</h1>

<ul class='dnd'>

	<li>aaaaaaaa</li>

	<li>bbbbbbbb</li>

	<li>cccccccc</li>

	<li>dddddddd</li>

	<li>eeeeeeee</li>

	<li>ffffffff</li>

	<li>gggggggg</li>

	<li>hhhhhhhh</li>

	<li>iiiiiiii</li>

	<li>jjjjjjjj</li>

	<li>kkkkkkkk</li>

</ul>

<ul>

	<li>11111111</li>

	<li>22222222</li>

	<li>33333333</li>

	<li>44444444</li>

	<li>55555555</li>

	<li>66666666</li>

	<li>77777777</li>

	<li>88888888</li>

	<li>99999999</li>

	<li>112122321</li>

	<li>341433434</li>

</ul>

</body>

　　

JavaScript一个拖动元素的实例的更多相关文章

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

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

  2. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  3. JavaScript事件模拟元素拖动

    一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...

  4. 原生JavaScript 获取下一个/上一个同胞元素

    看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery  prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...

  5. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  6. JavaScript封装函数：获取下一个/上一个兄弟元素节点

    要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...

  7. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  8. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  9. 用javascript实现html元素的增删查改[xyytit]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Java ClassLoader 原理分析

    一.ClassLoader(类加载器)的作用 如果一个程序包含不止一个class文件,那么当程序启动时,带有main方法的类的class文件作为程序入口先被JVM加载,然后根据程序调用的需要,再逐步进 ...

  2. Spring Boot 负载均衡之外置session状态保存

    在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而打到另外一台服务器的时候,session丢失. 常规的解决方 ...

  3. salesforce零基础学习（七十二）项目中的零碎知识点小总结（一）

    项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考. 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔细,导致开发的时候走了一些弯路.还好得到 ...

  4. 写给Android App开发人员看的Android底层知识（8）

    (十)PMS及App安装过程 PMS,全称PackageManagerService,是用来获取Apk包的信息的. 在前面分析四大组件与AMS通信的时候,我们介绍过,AMS总是会使用PMS加载包的信息 ...

  5. python——爬虫&问题解决&思考（四）

    继续上一篇文章的内容,上一篇文章中已经将url管理器和下载器写好了.接下来就是url解析器,总的来说这个模块是几个模块中比较难的.因为通过下载器下载完页面之后,我们虽然得到了页面,但是这并不是我们想要 ...

  6. Spring+SpringMVC+MyBatis深入学习及搭建(七)——MyBatis延迟加载

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6953005.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(六)——My ...

  7. Centos 环境一键部署脚本（shell脚本）

    谨以此文纪念吊炸天的Centos环境一键部署方案的新鲜出炉 辛苦大半年,产品准备上线了,BOSS亲自体验安装部署,看着超过200+页的安装文档直接崩溃了(需要部署23个基础服务),经历了超过3个小时的 ...

  8. Python常用的第三方库

    最近学习python 做些数据挖掘相关的练习,涉及到很多第三方的库,所以做一总结. Setuptools 可以让程序员更方便的创建和发布 Python 包,特别是那些对其它包具有依赖性的状况. 我特别 ...

  9. android 定时器(Handler Timer Thread AlarmManager CountDownTimer)

    Android实现定时任务一般会使用以上(Handler Timer Thread AlarmManager CountDownTimer)五种方式.当然还有很多组合使用(比如Handler+Thre ...

  10. Elasticsearch索引和文档操作

    列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...