pc端通过拖放实现添加、删除功能

最新推荐文章于 2022-11-04 15:09:36 发布

WebCsDn_TDCode

最新推荐文章于 2022-11-04 15:09:36 发布

阅读量514

点赞数

分类专栏：前端文章标签： html 拖动 pc

本文链接：https://blog.csdn.net/qq_42396791/article/details/83306538

版权

前端专栏收录该内容

70 篇文章 0 订阅

订阅专栏

话不多说上完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type="image/x-icon" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>通过拖放实现添加、删除 </title>
		<style type="text/css">
			.container{
				padding: 10px;
				box-sizing: border-box;
			}
			.container .mainclassify {
				color: #333333;
			}
			.container .mainclassify .title{
				line-height: 44px;
			}
			.container .mainclassify .title span{
				color: #CCCCCC;
				margin-left: 10px;
			}
			.container .mainclassify .listgroup-item {
			    background-color: none;
			    border: none;
			    overflow: hidden;
			}
			.container .mainclassify .listgroup-item li{
			    float: left;
			    width: 25%;
			    height: auto;
			}
			.container .mainclassify .listgroup-item .item_list{
			    /*background-color:;*/
			    width: 90%;
			    height: 70px;
			    margin: 5px auto;
			    padding: 5px;
			    box-sizing: border-box;
			    font-size: 12px;
			    color: #333;
			    border-radius: 5px;
			    background: #fff;
			}
		</style>
	</head>

	<body>
		<main class="container">
			<div class="mainclassify">
				<p class="fz14 title">我的分类</p>
				<ul class="listgroup-item">
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐1</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐2</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐3</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐4</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐5</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐6</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐7</div></li>
					<li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推荐8</div></li>
				</ul>
				<div style="border: 1px solid;width: 100%;height: 100px;" id="dest">
					<p ondragleave="return false">书藏家</p>
				</div>
				<img src="../images/garbagebin.png" id="gb" draggable="false"/>
			</div>
		</main>

		
		<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对象的属性和方法那么多，想怎么搭配都可以~

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

完整代码：https://download.csdn.net/download/qq_42396791/10738911

WebCsDn_TDCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
pc端通过拖放实现添加、删除功能

话不多说上完整代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type=&
复制链接

扫一扫