HTML5拖放行为——DataTransfer对象

最新推荐文章于 2024-08-07 09:45:17 发布

学习中的技术小白

最新推荐文章于 2024-08-07 09:45:17 发布

阅读量1.2w

点赞数 3

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/qq_37111953/article/details/78278048

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta 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 black;">
	<h2>可将你喜欢的项目拖进收藏夹</h2>
	<div draggable="true" ondragstart="dsHandler(event);">项目1</div>
	<div draggable="true" ondragstart="dsHandler(event);">项目2</div>
	<div draggable="true" ondragstart="dsHandler(event);">项目3</div>
	<div draggable="true" ondragstart="dsHandler(event);">项目4</div>
	<div draggable="true" ondragstart="dsHandler(event);">项目5</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
	<h2 ondragleave="return false">收藏夹</h2>
</div>
 <div id="gb" draggable="false" style="float:left;width:100px;height:100px;border:1px solid black;">垃圾桶</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.ondragleave = function(evt){
    //取消被拖动的元素离开本元素时触发该事件
        return false;
         
    }
    document.ondrop = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
</script>
</body>
</html>

这里写图片描述

在HTML 5 中img元素默认是可拖动的；而a元素只要设置了href属性，它默认也是可拖动的。

对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable属性设为true即可。但设置该属性只表示该元素可拖动，拖动过程中未携带数据，因此用户看不到效果。为了让拖动操作携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

document对象默认阻止拖动事件，所以被拖动元素到“目的地”时不被接受。为了让document可以接受“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件默认行为。

拖放操作的相关事件有：

ondragstart：被拖放的HTML元素开始拖动时触发该事件。
ondrag：被拖放的HTML元素在拖放过程中不断触发该事件。
ondragend：被拖放的HTML元素拖放结束时触发该事件。
ondragenter：拖放时鼠标经过的元素在被拖放元素进入本元素的范围时触发该事件。
ondragover：拖放时鼠标经过的元素在被拖放元素进入本元素的范围拖动时不断触发该事件。
ondragleave：拖放时鼠标经过的元素离开本元素时触发该事件。
ondrop：拖放时鼠标经过的元素在其他元素被放到本元素时触发该事件。

DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法：

dataTransfer.dropEffect：设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许none、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(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据。