2.5.3DataTransfer对象

最新推荐文章于 2024-03-27 09:10:27 发布

ssmoom

最新推荐文章于 2024-03-27 09:10:27 发布

阅读量765

点赞数

分类专栏： HTML5_CSS3_JavaScript

HTML5_CSS3_JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>2.5.3DataTransfer对象</title>
	</head>
	<body>
		拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，
		该对象包含如下属性和方法。<br>
		
		<p>
			1、dataTransfer.dropEffect：设置或返回拖放目标上允许发生的拖放行为。<br>
			如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。<br>
			该属性值只允许为“none”、“copy”、“link”和“move”四个值之一。
		</p>
		
		<p>
			2、dataTransfer.effectAllowed：设置或返回被拖动元素允许发生的拖动行为。<br>
			该属性值可设置为“none”、“copy”、“copyLink”、“copyMove”、“link”、
			“linkMove”、“move”、“all”和“uninitialized”。
		</p>
		
		<p>
			3、dataTransfer.items：该属性返回DataTransferltems对象，该对象代表了拖动数据。
		</p>
		
		<p>
			4、dataTransfer.setDragImage(element,x,y)：设置拖放操作的自定义图标。<br>
			其中element设置自定义图表，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在
			垂直方向的距离。
		</p>
		
		<p>
			5、dataTransfer.addElement(element)：添加自定义图标。
		</p>
		
		<p>
			6、dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了
			存入dataTransfer中数据的所有类型。
		</p>
		
		<p>
			7、dataTransfer.getData(format)：获取DataTransfer对象中format格式的数据。
		</p>
		
		<p>
			8、dataTransfer.setData(format,data)：向DataTransfer对象中设置format格式的数据。
			其中format代表数据格式，data代表数据。
		</p>
		
		<p>
			9、dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据。
			如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
		</p>
		
		<p>
			通过DataTransfer对象，可以让拖放操作实现更丰富的功能——开发者可以在拖放开始
			时（ondragstart事件）将拖放源的数据存入DataTransfer对象中，然后在拖放结束时从
			DataTransfer对象中读取数据，这样就可以完成更复杂的拖放操作了。
		</p>
		
		<p>
		eg：实现一个允许通过拖放来添加、删除“收藏项”的功能。
		<!--
<!DOCTYPE html>
<html>
	<head>
		<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title> 通过拖放实现添加、删除 </title>
		<style type="text/css">
			div>div{
				display: inline-block;
				padding: 10px;
				background-color: #aaa;
				margin: 3px;
			}
		</style>
	</head>
	<body>
		<div style="width:600px;border:1px solid black;">
			<h2>可将喜欢的项目拖入收藏夹</h2>
			<div draggable="true" οndragstart="dsHandler(event);">疯狂Java联盟</div>
			<div draggable="true" οndragstart="dsHandler(event);">疯狂软件教育</div>
			<div draggable="true" οndragstart="dsHandler(event);">关于我们</div>
			<div draggable="true" οndragstart="dsHandler(event);">疯狂成员</div>
		</div>
		<div id="dest"
			style="width:400px;height:260px; 
			border:1px solid black;float:left;">
			<h2 οndragleave="return false;">收藏夹</h2>
		</div>
		<img id="gb" draggable="false" src="images/garbagebin.png"
			alt="垃圾桶" style="float:left;"/>
		<script type="text/javascript">
			var dest = document.getElementById("dest");
			// 开始拖动事件的事件监听器
			var dsHandler = function(evt)
			{
				// 将被拖动元素的innerHTML属性值设置成被拖动的数据
				evt.dataTransfer.setData("text/plain"
					, "<item>" + evt.target.innerHTML);
			}
			dest.ondrop = function(evt)
			{
				var text = evt.dataTransfer.getData("text/plain");
				// 如果该text以<item>开头
				if (text.indexOf("<item>") == 0)
				{
					// 创建一个新的div元素
					var newEle = document.createElement("div");
					// 以当前时间为该元素生成一个唯一的ID
					newEle.id = new Date().getUTCMilliseconds();
					// 该元素内容为“拖”过来的数据
					newEle.innerHTML = text.substring(6);
					// 设置该元素允许拖动
					newEle.draggable="true";
					// 为该元素的开始拖动事件指定监听器
					newEle.ondragstart = function(evt)
					{
						// 将被拖动元素的id属性值设置成被拖动的数据
						evt.dataTransfer.setData("text/plain"
							, "<remove>" + newEle.id);
					}
					dest.appendChild(newEle);
				}
		
			}
			// 当把被拖动元素“放”到垃圾桶上时激发该方法。
			document.getElementById("gb").ondrop = function(evt)
			{
				var id = evt.dataTransfer.getData("text/plain");
				// 如果id以<remove>开头
				if (id.indexOf("<remove>") == 0)
				{
					// 根据“拖”过来的数据，获取被拖动的元素
					var target = document.getElementById(id.substring(8));
					// 删除被拖动的元素
					dest.removeChild(target);
				}
			}
			document.ondragover = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
			document.ondrop = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
		</script>
	</body>
</html>
		-->
		以上例子，充分利用了DataTransfer对象来“携带”数据，基本思路:<br>
		1.“拖”开始时（通过ondragstart事件监听器来实现），程序把需要携带的
		数据放入DataTransfer对象中。<br>
		2.“放”下元素时（通过ondrop事件监听器来实现），程序从DataTransfer
		对象中取出数据，并利用该数据进行相应的处理。上面程序为两种拖放数据
		分别添加了item、remove，分别代表需要添加收藏项的数据、需要删除的数据。
		</p>
		
	</body>
</html>