HTML5 元素拖拽移动删除效果_html 拖拽结束后有动画-CSDN博客

本文链接：https://blog.csdn.net/javaecrainbow/article/details/9106865

本文介绍了一种利用HTML5的拖放技术实现语言卡片在网页中进行添加和删除的功能。用户可以将喜欢的编程语言卡片拖拽到收藏夹区域，也可以将其移除到垃圾桶图标上实现删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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);">PHP</div>
<div draggable="true" οndragstart="dsHandler(event);">C++</div>
<div draggable="true" οndragstart="dsHandler(event);">C</div>
</div>
<div id="dest"
	style="width:400px;height:260px; 
	border:1px solid black;float:left;">
	<h2>收藏夹</h2>
</div>
<img id="gb" draggable="false" src="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.ondragleave = function(evt){
	//取消被拖动的元素离开本元素时触发该事件
		return false;
		
	}
	document.ondrop = function(evt)
	{
		// 取消事件的默认行为
		return false;
	}
</script>
</body>
</html>