【js练习】draggable属性和dataTransfer对象

最新推荐文章于 2024-06-12 23:23:23 发布

cyseria

最新推荐文章于 2024-06-12 23:23:23 发布

阅读量5.7k

点赞数

分类专栏： HTML 文章标签： draggable dataTransfer

本文链接：https://blog.csdn.net/cyseria/article/details/38354291

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先说下HTML5里新增的draggable属性

在html5中，默认<img.../>和设置了href的<a>是可拖动的，其他都需手动把元素的draggable属性设置为true

然后使元素携带数据应该为被拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。

之后为了让document接受放的动作，为documen的ondragover事件设定监听器，在监听器中取消document对拖动事件的默认行为。

然而，不同浏览器在元素拖到指定位置释放之后默认的动作是不同的（firefox释放后会跳转到新页面，chrome则没有任何动作），所以

我们要取消拖放操作的默认动作，为document的ondrop绑定监听器

例如，一个允许自由拖动的div:

<span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>可拖动</title>
<style type="text/css">
#source{
	border: 1px solid #000000;
	background-color: #ccc;
	width: 80px;
	height: 80px;
}
</style>

</head>
<body>
<div id="source">
HELLO WORLD。
</div>
<script type="text/javascript">
	var source = document.getElementById("source");
	source.ondragstart = function(evt){
		//让拖动携带数据
		evt.dataTransfer.setData("text/plain","www.fkjava.org");
	}
	document.ondragover = function(evt){
		//取消事件的默认行为
		return false;
	}
	document.ondrop = function(evt){
		source.style.position = "absolute";
		source.style.left = evt.pageX + "px";
		source.style.top = evt.pageY + "px";
		//取消事件的默认行为
		return false;
	}
</script>
</body>
</html>
</span>

附：触发事件

ondragstart：开始拖动时触发
ondrag：拖动过程中不断触发
ondragend：拖动结束时触发
ondragenter：被拖动元素进入本元素的范围内时触发
ondragover：被拖动元素进入本元素的范围内拖动时不断触发
ondragleave：被拖动元素离开本元素时触发

ondrop：其他元素被放到了本元素时触发

再来说下DataTransfer对象

拖放触发的拖放事件有一个dataTransfer的属性，该属性值是一个DataTransfer对象

对象属性:

dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
dataTransfer.items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图表，x，y分别为鼠标水平方向和竖直方向的距离。
dataTransfer.addElement（element）：添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(ormat)：获取DataTransfer对象中format格式的数据
dataTransfer.setData(format，data)：向DataTransfer对象中设置format格式的数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据，如果省略format，则清楚全部数据。

下面展示一个允许通过拖动来添加，删除”收藏夹“功能

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<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 #ccc;">
	<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="widh:400px;height:400px;border:1px solid #ccc;float:left;">
	<h2 οndragleave="return false;">收藏夹</h2>
</div>
 <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>
<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>