前端——通过“拖放”元素来添加、删除元素

最新推荐文章于 2023-09-12 10:36:39 发布

一只野生饭卡丘

最新推荐文章于 2023-09-12 10:36:39 发布

阅读量2.3k

点赞数 2

分类专栏： HTML 文章标签： DataTransfer 拖放删除携带数据 ondragstart

本文链接：https://blog.csdn.net/Searchin_R/article/details/83033995

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

当今时代，玩手机恐怕成为了大部分人的日常。玩手机，那当然是玩手机里的app啦，那么多app，肯定有很多有趣好玩的。可万一不想要这个应用了怎么办？

简单！谁还没卸载过几个应用呀~

怎么卸载呢，最简单的方法，长按这个app的图标一两秒，这个图标就会变成可拖动，手机桌面上方的位置会出现一个写着卸载的区域，将图标拖进该区域，确认之后，就可以卸载这个软件啦。

这一部分功能实现可以称作通过拖放来删除app。那么我们制作页面的时候，比如做一个在线制图的网站，要是有的文件不想要了，那么可以拖动这个文件，将它放到垃圾箱里面，这样就完成了删除功能。

这个功能其实很简单，这个需要借助HTML5新增的拖放API来实现。

这个知识点我之前有讲过，这是链接：https://mp.csdn.net/mdeditor/82766377#

大家如果对拖放不了解的，可以先看看上面这篇博客。

好啦，回归正题。

刚才说到“拖放”，可是光拖放也不能够删除元素呀，这就需要借助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对象中的全部数据。

显然，上面的属性和方法可以帮助我们实现很多复杂的功能。下面我们就来试试如何通过拖动元素来添加和删除。

阿福~ 关门！放代码！

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<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: #777;
			margin: 3px;
		}
	</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>将喜欢的小哥哥拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">江四晴</div>
<div draggable="true" ondragstart="dsHandler(event);">江老四</div>
<div draggable="true" ondragstart="dsHandler(event);">饭卡丘</div>
<div draggable="true" ondragstart="dsHandler(event);">江猪猪</div>
</div>
<div id="dest"
	style="width:400px;height:260px; 
	border:1px solid black;float:left;">
	<h2 ondragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539358275&di=e69c33500898f1de97ba14e9b19fa296&src=http://img007.hc360.cn/g7/M08/FB/21/wKhQtFP72ACETPP3AAAAANWI-Go407.jpg"
	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)
	{
		evt.preventDefault();
		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对象来携带数据，才可以像刚才那样添加小哥哥和删除小哥哥。

下面是携带数据的基本思路：

“拖”开始的时候（‘拖’通过ondragstart事件监听器来实现，上面的代码有详细注释哟），程序把需要携带的数据放入DataTransfer对象中。
“放”下元素的时候（通过ondrop事件监听器来实现），程序从DataTransfer对象中取出数据，并利用该数据进行相应的处理。上边的程序就为两种拖放数据分别添加了<item>、<remove>，分别代表需要添加收藏夹的数据和需要删除的数据。

好啦，以上就是通过拖动元素来添加和删除的功能实现。由此可见，通过DataTransfer对象，我们可以让拖放操作实现更丰富的功能。毕竟，DataTransfer对象的属性和方法那么多，想怎么搭配都可以~

好啦，如果大家有什么疑问，或者发现文章中有什么错误，欢迎大家留言评论呀，我们一起学习咯~

一只野生饭卡丘

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
前端——通过“拖放”元素来添加、删除元素

当今时代，玩手机恐怕成为了大部分人的日常。玩手机，那当然是玩手机里的app啦，那么多app，肯定有很多有趣好玩的。可万一不想要这个应用了怎么办？简单！谁还没卸载过几个应用呀~怎么卸载呢，最简单的方法，长按这个app的图标一两秒，这个图标就会变成可拖动，手机桌面上方的位置会出现一个写着卸载的区域，将图标拖进该区域，确认之后，就可以卸载这个软件啦。这一部分功能实现可以称作通过拖放来删除ap...
复制链接

扫一扫