JavaScript一个拖动元素的实例

<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一个拖动元素的实例的更多相关文章

每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
JavaScript 实现鼠标拖动元素
一.前言最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
JavaScript事件模拟元素拖动
一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...
原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取上 ...
JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
JavaScript封装函数：获取下一个/上一个兄弟元素节点
要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等解决IE兼容性问题代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...
JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
用javascript实现html元素的增删查改[xyytit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

一起学习java
一.Servlet学习下面是Servlet一个整体的继承结构首先说一下Servlet这个接口这个主要包含的有init,service,destroy等方法,这里主要介绍这3个 ...
Eclipse导入项目常见问题----jdk版本问题（有个红色感叹号）01
我们导入项目时,有时会看到项目上有一个[红色的感叹号!],这说明该项目的jdk版本和你的电脑安装的jdk版本不匹配. 可能导入的项目时jkd1.6,1.8等等,而你安装的是jdk1.7 如下图: 解决 ...
Publishing failed with multiple errors.问题解决
问题:Publishing failed with multiple errors.(发布失败与多个错误) 原因:项目工程文件删除,但eclipse里面仍显示存在. 解决方案:刷新项目工程,重新部署, ...
DOS学习札记（一）
DOS学习入门最近碰到几个关于cmd命令操作,感觉操作快捷方便(也许是偶尔新鲜感使然),由于重装系统后,系统的资源管理器与功能分布都有一些不同,导致在寻找一些windows功能时有些费劲,比如说关闭 ...
java实现发送邮件
前言:先引入javamail用到的jar包, 自己下载http://fhed.v061.10000net.cn/gulili198509051s/newjspkongjian/ueditor/jsp/ ...
模拟jquery底层链式编程
//特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...
[转] 传说中的WCF（2）：服务协定的那些事儿
上一篇文章中,我们抛出了N个问题:WCF到底难不难学?复杂吗?如果复杂,可以化繁为简吗? 其实,这些问题的答案全取决于你的心态,都说“态度决定一切”,这句话,不知道各位信不信,反正我是信了.首先,敢于 ...
guoshiyv 数据结构与算法2-1 线性链式存储
线性链式存储: 包含两部分:1.存储的单个元素 2.指针,指向下一个的地址 typedef struct() { ElementType Data; struct Node *Next; }Lis ...
WCF学习——构建一个简单的WCF应用（二）
我们接着上一篇文章进行讲解 http://www.cnblogs.com/songjianhui/p/7060698.html 一:客户端通过添加引用调用服务 WCF应用服务被成功寄宿后,WCF服务应 ...
IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

JavaScript一个拖动元素的实例

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

随机推荐

热门专题