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

随机推荐

【Android】又一个Gank客户端来啦
介绍 Gank平台的移动端又来了,非常感谢Gank平台开放接口,让我们这些小白有机会练手.学习. 本项目在架构方面有稍微花点心思,虽然还是最简单的MVC模式,但基本参考MVP的思想,Activity只 ...
VR全景智慧城市-提前进入商家观景，涵盖实体行业
互联网发展的迅猛势头,让很多的实体商家翻了个大跟头,更有言说,未来的大街小巷根本见不到逛街的人,可是线上商城相继曝出的假货谁来买单?相比之下眼见为实更让消费者心里觉得踏实.所以,全景智慧城市更能满足大 ...
Python教程(2.2)——数据类型与变量
和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...
POJ 3685 二分套二分
Matrix Given a N × N matrix A, whose element in the i-th row and j-th column Aij is an number that e ...
Ubuntu安装genymotion模拟器步骤
1．安装VitrualBox genymotion模拟器需要有VirtualBox环境,打开终端(ctrl + alt + T),执行以下命令: sudo apt-get install virtua ...
HTML 简单了解
HTML 特别的通俗易懂!想学自己制作网页的,就来我这看看吧! 首先我先介绍一下什么是HTML! HTML是用来描述网页的一种语言!他结合CSS样式之后会有非常炫酷的样式! 1.HTML是指一种超文 ...
Eclipse汉化后如何还原为EN英文（实用技巧） --转
自从那天脑袋短路后,下了个汉化包将Eclipse给汉化了,用的我真TMD的不习惯,一直想还原为EN文,试了好多办法,删文件,汉化包,改eclipse.ini文件中的"-nl zh" ...
JVM高级特性-二、JVM在堆中对象的分配、布局、访问过程
前面介绍了jvm运行时数据区域后,下面讲解下对内存中数据的其他细节,看他们是如何创建.布局及访问的一.对象的创建 1.对象的分配对象的创建分配方式主要有两种:指针碰撞和空闲列表指针碰撞: 假设堆 ...
mysql数据导入方法
1. 通过mysql-workbench的Data Import/Restore功能 1) 有的命令不支持,比如LOAD DATA LOCAL INFILE 2) 好处是可以和DB的模 ...
Navicat连接Oracle报错_Cannot load OCI DLL 87
原因: Oracle需要装client才能让第三方工具通过OCI(Oracle Call Interface)来连接. 解决方案: 1. 去oracle官网下载Instant Client 11, 或 ...

JavaScript一个拖动元素的实例

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

随机推荐

热门专题