H5之drag函数和draggable的使用

最新推荐文章于 2023-05-11 17:12:00 发布

qq_37852483

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量718

点赞数

分类专栏： H5 文章标签：简单的使用学习

本文链接：https://blog.csdn.net/qq_37852483/article/details/88758818

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

drag函数和draggable的使用

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>drag函数和draggable的使用</title>
	<style>
		div.dropTarget{
			width: 200px;
			height: 200px;
			margin-left: 200px;
			/* display: inline-block; */ 
			/* div文字对齐的方式  */
			float: left;
			border: 1px solid black;
		}
		p.demo::before{
			content: "";
			display: block;
			clear: both;
		}
		/* 也可以在浮动元素的下一个元素前面里面设置一个before伪元素来清除浮动流 */
	</style>
</head>
<body>
	<div class="dropTarget">
		<p id="dragTarget" draggable="true">请拖动我</p>
	</div>
	<div class="dropTarget"></div>
	<p class="demo"></p>
	<p>看看是否清除了浮动流</p>
	<script>
		var p1=document.getElementsByClassName('demo')[0];
		var drag=document.getElementById('dragTarget');
		var divtest=document.getElementsByClassName('dropTarget');
		drag.addEventListener('dragstart',function(e){
			e.dataTransfer.setData("Id",e.target.id);
			e.target.style.opacity=0.4;
			p1.innerHTML="p正在被拖动";
		});
		drag.addEventListener('drag',function(e){
			p1.style.color="red";
			console.log('这要被拖住就一直会执行');
		});
		// 当拖完p元素输出一些文本元素和重置透明度
		drag.addEventListener('dragend',function(e){
			console.log('dragend事件比drop事件还要晚执行');
			e.target.style.opacity=1;
			p1.innerHTML="p被拖动完成了了了了了了了了了";
			p1.style.color="";
		});
		document.addEventListener('dragenter',function(e){
			if(e.target.className=='dropTarget'){
				console.log('我进来了')
				e.target.style.border="3px dotted red";
			}
		});// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
		document.addEventListener('dragover',function(e){
				e.preventDefault();
		});// 当可拖放的p元素离开droptarget，重置div的边框样式
		document.addEventListener('dragleave',function(e){
			if(e.target.className=='dropTarget'){
				console.log('我离开了');
				e.target.style.border="";
			}
		});
		/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
		复位输出文本的颜色和DIV的边框颜色
		利用dataTransfer.getData()方法获得拖放数据
		拖拖的数据元素id("dragTarget")
		拖拽元素附加到drop元素*/
		document.addEventListener('drop',function(e){
			e.preventDefault();
			if(e.target.className=='dropTarget'){
				console.log('这里是drop');
				var id1=e.dataTransfer.getData('Id');
				var temp=document.getElementById(id1);
				e.target.appendChild(temp);
				e.target.style.border="";
			}
		});
	</script>
</body>
</html>

另外，关于拖放drag中的其它一些坑：
1.调用drop之前一定要先调用dragover,不管你想不想用，并且在处理函数的第一行加上：event.preventDefault();表示允许放下元素
2.只能在dragstart调用函数里执行setData;在drop调用函数了执行getData;这是由操作权限所决定的。
原文：https://blog.csdn.net/monkeydie/article/details/78118699