首页 > 代码库 > JavaScript一个拖动元素的实例

JavaScript一个拖动元素的实例

<script type="text/javascript" src="http://www.mamicode.com/whenReady.js"></script>
<body>
<script type="text/javascript">
whenReady(function(){
	var clock = document.getElementById(‘clock‘); 	//时钟元素
	var icon = new Image();				//用于拖动的图片
	icon.src = "http://www.mamicode.com/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一个拖动元素的实例