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/ ...

随机推荐

关于laravel5.2仓库的建立，以及简单调用
laravel个人比较喜欢,就是控制器里面逻辑代码的分离,这样结构很清晰,有利于后期的维护,现在就把平时工作中运用的仓库模式,分享一下,望指正. *************************** ...
Graphical Analysis of German Parliament Voting Pattern
We use network visualizations to look into the voting patterns in the current German parliament. I d ...
Introducing: Machine Learning in R（转）
Machine learning is a branch in computer science that studies the design of algorithms that can lear ...
The leaflet package for online mapping in R（转）
It has been possible for some years to launch a web map from within R. A number of packages for doin ...
java 与操作系统进程同步问题（二）————经典消费者生产者问题
http://www.cnblogs.com/zyp4614/p/6033757.html (java 与操作系统进程同步问题(一)----互斥问题) 今天写的是最经典的生产者消费者问题,最简单的版本 ...
一天搞定CSS：文本text--05
1.文本体系 2.文本各属性取值说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如text-align- - - -有3个取值:left,center,right 3.空格大小 4.代 ...
Java语言编程注意事项
1.大小写敏感,要注意区分大小写: 2.一般每一句代码写完之后,后面以":"结尾: 3.在代码中,括号的出现一般都是成对的,如:{}.
使用Oracle数据库实现树形结构表的子-父级递归查询和删除，通过级联菜单简单举例
前言: 我们在开发中,常常遇到单表的子-父id级联的表结构,在树形的深度不确定的情况下,一次查询出某个树形结构下的所有具有子-父级关系的数据变得十分困难. 这时,我们使用oracle提供的CONNEC ...
Grunt压缩HTML和CSS
我的小伙伴们!我明明在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建 ...
惊心动魄的SAP S4客户额度调整运动
今天一大早,收到商务部发来的消息,说某一个客户的额度超额了,但实际上并未超额.从SAP系统中反馈的额度来看,显示超了2万多.后来经过在BP画面检查信用段发现,这个客户额度占用里面,某一个未清订单已经部 ...

JavaScript一个拖动元素的实例

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

随机推荐

热门专题